砌体 - 与ImagesLoaded一起使用

Question

我有Masonry和ImagesLoaded运行，它们似乎都工作正常。

但是我的图像仍然没有加载到一个完美的网格中。只有在屏幕移动几次后才能正确加载。

您可以在此处查看页面：http://pagedev.co.uk/page-newsite/work.php

任何帮助都会很棒！

我的HTML是：

<div class="grid">
  <div class="grid-sizer"></div>

    <div class="grid-item grid-item--width2">
        <img src="http://placehold.it/660x550">
    </div>

</div>

CSS：

.grid {
    width:85%;
    height:auto;
    margin:0px auto;
    position:relative;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- Work grid-item ---- */

.grid-sizer,
.grid-item {
  width: 25%;
  position:relative;
}

.grid-item {
  height: auto;
  float: left;
}

.grid-item img {
  width:100%;
  height:auto;
}

.grid-item--width2 { width:  50%; }

JS：

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
$('.grid').imagesLoaded( function() {
    $('.grid').masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    });
});
</script>

提前谢谢。

利