我发现这个模板演示了我使用
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提供.)
(imagesLoaded()由脚本 http://github.com/desandro/imagesloaded提供.)
$('.gallery-masonry').imagesLoaded( function(){ $('.gallery-masonry').masonry({ itemSelector: '.item',isFitWidth: true }); });
原文地址:https://www.jb51.cc/php/138216.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。