javascript jquery 砌体图像重叠，直到完成页面大小调整
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16391198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery masonry images are overlapping until a page resize is done
提问by Paul
I've found this template that demonstrates the issue I'm having with jquery masonryand image layout. Take a look at this twitter bootstrap template page:
我发现这个模板演示了我在jquery 砌体和图像布局方面遇到的问题。看看这个 twitter bootstrap 模板页面：
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.
第一次加载页面时，所有图像都会相互堆叠，直到完成页面刷新或重新调整大小。然后图像将正确显示。
Here is my HTML and jQuery that has the same problem:
这是我的 HTML 和 jQuery，它们有同样的问题：
HTML
HTML
<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?
知道为什么会发生这种情况，我该如何解决？
回答by Tamil Selvan C
Use imagesLoaded() to triggered masonry after all images are loaded.
(imagesLoaded()is provided by the script http://github.com/desandro/imagesloaded.)
在加载所有图像后，使用 imagesLoaded() 触发砌体。（imagesLoaded()由脚本http://github.com/desandro/imagesloaded 提供。）
$('.gallery-masonry').imagesLoaded( function(){
$('.gallery-masonry').masonry({
itemSelector: '.item',
isAnimated: true,
isFitWidth: true
});
});
回答by JGallardo
The accepted answer has missing steps. So here is a step-by-step.
接受的答案缺少步骤。所以这里是一个循序渐进的过程。
- Go to the imagesloadedrepo and download the minified version at https://github.com/desandro/imagesloaded/blob/master/imagesloaded.pkgd.min.js.
- Add that library to your project.
- At the bottom of your page call the file
- 转到imagesloaded 存储库并在https://github.com/desandro/imagesloaded/blob/master/imagesloaded.pkgd.min.js下载缩小版本。
- 将该库添加到您的项目中。
- 在页面底部调用文件
```[Adjust path to your javascript files]
```[调整你的javascript文件的路径]
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script>
$('.gallery-masonry').imagesLoaded( function(){
$('.gallery-masonry').masonry({
itemSelector: '.item',
isAnimated: true,
isFitWidth: true
});
});
</script>
