jQuery的砌体图像重叠，直到页面大小调整完成(jquery masonry images are

我发现这个模板演示我与遇到的问题jQuery的砖石和图像布局。 看看这个Twitter的引导模板页面 ：

直到页面刷新或重新大小完成页面加载的所有图像，第一次被彼此堆叠。 然后图像正确显示。

这是我的HTML和jQuery有同样的问题：

HTML

<div class="gallery-masonry masonry" style="position: relative; min-height:100px; height: auto;">
  <div id="loading">Loading ...</div>                            
</div>

jQuery的

$.post("functions/photo_functions.php", { f: 'getallphotos'}, function(data) {

  $('#loading').hide();

    if(data) {  
      $.each(data.images, function(i, image) {
        var img_block = '<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">' +
        '<a href="#" class="thumbnail"><img src="'+image.url+'" alt=""></a>' +
        '<div class="actions">' +
        '<a title="" href="#" class="tip-top" data-original-title="Edit"><i class="icon-pencil icon-white"></i></a>' +
        '<a title="" href="#" class="tip-top" data-original-title="Remove"><i class="icon-remove icon-white"></i></a>' +
        '</div>' +
        '</div>';

        $(".gallery-masonry").append(img_block);
          });

        $('.gallery-masonry').masonry({
          itemSelector: '.item',
          isAnimated: true,
          isFitWidth: true
        });             
      }

    }, "json");

任何想法，为什么发生这种情况，我会如何解决这个问题？

Answer 1:

所有的图像加载后使用imagesLoaded（）来触发的砖石。 （ imagesLoaded()是由脚本提供http://github.com/desandro/imagesloaded 。）

$('.gallery-masonry').imagesLoaded( function(){
  $('.gallery-masonry').masonry({
   itemSelector: '.item',
   isAnimated: true,
   isFitWidth: true
  });
});

Answer 2:

接受答案有缺少的步骤。 因此，这里是一步一步的。

1. 转至imagesloaded回购和下载缩小的版本https://github.com/desandro/imagesloaded/blob/master/imagesloaded.pkgd.min.js 。
2. 该库添加到您的项目。
3. 在你的页面的底部调用文件

```[调整路径JavaScript文件]

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

<script>
  $('.gallery-masonry').imagesLoaded( function(){
    $('.gallery-masonry').masonry({
     itemSelector: '.item',
     isAnimated: true,
     isFitWidth: true
    });
  });
</script>

文章来源: jquery masonry images are overlapping until a page resize is done