javascript - 同位素装订线在页面加载时不完美，但在窗口调整大小后变得完美

Question

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

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

please see my fiddle here

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>