jquery砌体图像重叠,直到完成页面调整大小 [英] jquery masonry images are overlapping until a page resize is done
问题描述
我发现这个模板演示了我使用 jquery masonry 和图像布局时遇到的问题。看看这个Twitter bootstrap模板页面:
I've found this template that demonstrates the issue I'm having with jquery masonry and image layout. Take a look at this twitter bootstrap template page:
第一次加载页面时,所有图像都相互堆叠,直到页面刷新或重新调整大小为止。然后正确显示图像。
The very first time the page is loaded all the images are stacked on each other until a page refresh or re-size is done. The images are then displayed correctly.
这是我的HTML和jQuery有同样的问题:
Here is my HTML and jQuery that has the same problem:
<div class="gallery-masonry masonry" style="position: relative; min-height:100px; height: auto;">
<div id="loading">Loading ...</div>
</div>
jQuery
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");
知道为什么会发生这种情况以及如何解决这个问题?
Any idea why this is happening and how might I fix it?
推荐答案
在加载所有图像后,使用imagesLoaded()触发砌体。
( imagesLoaded()
由脚本 http提供://github.com/desandro/imagesloaded 。)
Use imagesLoaded() to triggered masonry after all images are loaded.
(imagesLoaded()
is provided by the script http://github.com/desandro/imagesloaded.)
$('.gallery-masonry').imagesLoaded( function(){
$('.gallery-masonry').masonry({
itemSelector: '.item',
isAnimated: true,
isFitWidth: true
});
});
这篇关于jquery砌体图像重叠,直到完成页面调整大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!