php – jquery砖石图像重叠,直到页面调整大小完成

发布时间：2020-12-13 13:39:48 所属栏目：PHP教程来源：网络整理

导读：我发现这个模板演示了我使用 jquery masonry和图像布局的问题.看看这个twitter引导模板 page：第一次加载页面时,所有图像都将堆叠在一起,直到页面刷新或重新调整大小.然后正确显示图像. 这是我的HTML和jQuery有同样的问题： HTML div class="gallery-masonr

我发现这个模板演示了我使用 jquery masonry和图像布局的问题.看看这个twitter引导模板 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");

任何想法为什么会发生这种情况,我该如何解决？

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!