Question

我会尽量保持清醒。我的目标是用固定数量的正方形填充窗口空间，这些正方形也可以响应窗口大小的变化。然后这些方块将随机消失，直到只有它们的树在中间保留为按钮。

我找到了一段用于照片库的代码，并尝试根据我的目的进行调整，但我被卡在响应部分上。

这是我的索引：

    <html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> SPLIT</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    <script src ="jquery.sliced.js"></script>

   <link rel="stylesheet" href="jquery.sliced.css"/>


</head>
<body>

<div class="square"></div>

    <div id ="wrapper">
    <div id="back"></div>
    </div>
</body>


</html>

这是我的CSS：

html, body {
    width:100%;
}

#wrapper {
    width:100%;
    height:100%;
    margin-left:-5px;
    padding-top:-10px;
    position:fixed;
    overflow:hidden;
}


.tile { 
    float:left;
    background-color:red;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
}


.tile:hover { 
    opacity:0; 
}

我的JS：

$(window).load(function(){
;(function( $, window ) {

var _defaults = {
    x : 20, // number of tiles in x axis
    y :20, // number of tiles in y axis
    gap:2,
    random : true, // animate tiles in random order
    speed : 2000 // time to clear all tiles
};

  $.fn.splitInTiles = function( options ) {

    var o = $.extend( {}, _defaults, options );

    return this.each(function() {

      var $container = $('#wrapper');
         var width = $container.width(),
          height = $container.height(),
          $back = $("#back"),
          n_tiles = o.x * o.y,
          tiles = [], $tiles;

      for ( var i = 0; i < n_tiles; i++ ) {
        tiles.push('<div class="tile"/>');
      }

      $tiles = $( tiles.join('') );

      // Hide original image and insert tiles in DOM
      $back.hide().after( $tiles );

      // Set background
      $tiles.css({
        width: width / o.x,
        height: height / o.y,
        marginBottom: o.gap +'px',
        marginRight: o.gap +'px',
      });

      // Adjust position
     $tiles.each(function() {
    var pos = $(this).position();
    $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
    });


    });

  };

}( jQuery, window ));

$('#back').splitInTiles();
});//]]>

这是结果的jsfiddle：

http://jsfiddle.net/Z5WyQ/13/

我似乎无法想方设法让方块同样填满窗口空间。

Answer 1

更改后，它确实有效：

$tiles.css({
    width: Math.floor((width / o.x) + o.gap),
    height: Math.floor((height / o.y) + o.gap),
    marginBottom: o.gap + 'px',
    marginRight: o.gap + 'px'
});

Answer 2

考虑到我对最初的问题没有答案，我想到了一个不同的想法。我认为如果方块会离开窗口并隐藏溢出也是可以的。这样可能会更容易保持它们正方形（考虑到那里的各种窗口大小）。这也有效，但不幸的是，这引发了另外两个问题： 1.如果屏幕太大（23'+），方块似乎突然结束，不会填满整个窗口。 2.根据特定宽度的屏幕宽度，我在屏幕左侧留下一个空白区域（列），即使我在父容器上隐藏了溢出。

我认为这会更简单，我仍然认为大师会有一个简单的解决方案来填充一个具有固定数量的响应方块的窗口，但我似乎无法弄明白。

响应方形图像重复以平均填充窗口空间

2 个答案: