jquery砌体图像重叠，直到完成页面resize

我发现这个模板演示了我对jquery砌体和图像布局的问题。 看一下这个twitter bootstrap模板页面 ：

第一次加载页面时，所有图像都相互堆叠，直到页面刷新或重新resize为止。 然后正确显示图像。

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

HTML

 
Loading ...
  

jQuery的

 $.post("functions/photo_functions.php", { f: 'getallphotos'}, function(data) { $('#loading').hide(); if(data) { $.each(data.images, function(i, image) { var img_block = '
' + '' + '
' + '' + '' + '
' + '
'; $(".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 repo并从https://github.com/desandro/imagesloaded/blob/master/imagesloaded.pkgd.min.js下载缩小版本。
2. 将该库添加到项目中。
3. 在页面底部调用该文件

“`[调整你的javascript文件的路径]