Question

我有一个响应同位素网格，当它加载网格时，水平排水沟明显比底部排水沟大，但是当我调整窗口大小时，它变得相等。

我想我可以使用重新布局功能修复它，我想在加载文档后重新布局网格，但我不知道如何。我已经尝试修复网格的百分比，但网格仍然不合适（这真的令人沮丧）。

CSS

    .item {
    float: left;
    height: 260px;
    background: blue;
    margin-bottom: 1%;
    overflow: hidden;
    } 
    .gutter-sizer {
    width: 1%;
    }
    .item, .grid-sizer {
        width: 24%;
    }
    .item.w2 {
        width: 49%;
    }
    .item.w3 {
        width: 74%;
    }
    .item.w4 {
        width: 99%;
    }
    .item.h2 {
        height: auto;
    }

我有这样的HTML

<div id="container">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item h2 w3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item w2"></div>
<div class="item w3"></div>
<div class="item"></div>

我的剧本：

      var $container = $('#container');
  // init
  $container.isotope({
      // options
      masonry: {
          columnWidth: '.grid-sizer',
          gutter: '.gutter-sizer'
      },
      itemSelector: '.item'
  });

显示调整大小时事件的视频

http://www.screencast.com/t/eAg23hmXtD

Answer 1

更简单的答案是添加imagesloaded脚本。该页面将首先加载图像，然后重新布局网格。我的错误是我包含了imagesLoaded脚本，但之前没有添加实际的imagesloaded插件。

<script src="inc/isotope/js/isotope.pkgd.min.js"></script>
<script src="inc/isotope/js/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">

// initialize Isotope
var $container = $('#container').isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});

</script>

同位素排水沟在页面加载时不完美，但在窗口调整大小后变得完美

1 个答案: