php - jquery masonry 图像重叠，直到完成页面大小调整

Question

我发现这个模板演示了我在使用 jquery masonry 时遇到的问题和图像布局。看看这个推特 Bootstrap 模板 page :

第一次加载页面时，所有图像都相互堆叠，直到完成页面刷新或调整大小。然后图像会正确显示。

这是我的 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
  });
});