jquery masonry 在 chrome/safari 中中断（堆叠图像），但仅在第一次加载时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7476649/
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 breaks(stacks images) in chrome/safari but only on first load
提问by rugbert
It seems that when I try to load the page, all the images are stacked on top of one another. But if you were to click a link which takes you to the same page (like the home link) then masonry kicks in. So I think masonry is loading too early, like before jquery readies the page or something.
似乎当我尝试加载页面时，所有图像都堆叠在一起。但是，如果您单击将您带到同一页面的链接（如主页链接），那么 masonry 就会启动。所以我认为 masonry 加载过早，就像在 jquery 准备页面之前一样。
Here my jquery call:
这是我的 jquery 调用：
$(document).ready(function(){
$('#image_roll_container').masonry({
itemSelector: '.box'
});
....
Here's the page in question:
这是有问题的页面：
it works just fine in firefox and IE8.
它在 Firefox 和 IE8 中工作得很好。
采纳答案by rugbert
looks like I needed a plugin called imagesLoaded in order for the Monsry script to work properly with the likes of chrome and safari
看起来我需要一个名为 imagesLoaded 的插件才能让 Monsry 脚本与 chrome 和 safari 之类的工具正常工作
回答by Kostyantyn
I've managed to fix this problem with the following tweak:
我设法通过以下调整解决了这个问题：
<script type="text/javascript">
$(document).ready(function(){
$('img').load(function(){
$(".content_photo").masonry();
});
$(".content_photo").masonry();
});
</script>
回答by yodalr
Tried everything suggested in this thread, nothing worked, then found this:
尝试了此线程中建议的所有内容，没有任何效果，然后发现：
$(window).load(function(){ $('#content').masonry(); });
Works fine now, found it here: https://github.com/desandro/masonry/issues/35
现在工作正常，在这里找到：https: //github.com/desandro/masonry/issues/35
Original post author: https://github.com/desandro
原帖作者：https: //github.com/desandro
回答by coop
You are correct about the imagesLoaded. It was working fine in Firefox but stacking in Chrome/Safari.
您对图像加载是正确的。它在 Firefox 中运行良好，但在 Chrome/Safari 中堆叠。
Here is the link https://masonry.desandro.com/layout.html#imagesloaded
这是链接https://masonry.desandro.com/layout.html#imagesloaded
Code:
代码：
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box'
});
});
回答by Chadimoglou
I recently came across this issue. To fix it, I utilized the img width and height attributes. The issue resolved itself.
我最近遇到了这个问题。为了解决这个问题，我使用了 img 的宽度和高度属性。问题自行解决。
回答by Jennifer Michelle
Another way, if you know the image heights, is to assign them in the CSS before you load Masonry, then the layout is faster than waiting for the images. This method works if, for example, all your images are the same size. Then your site will still load quickly on slow connections, like mobile.
另一种方法，如果你知道图像高度，是在你加载 Masonry 之前在 CSS 中分配它们，那么布局比等待图像更快。例如，如果您的所有图像大小相同，则此方法有效。然后，您的网站仍会在慢速连接（例如移动设备）上快速加载。
I posted a bit of script for alternative method here:
http://instancia.net/loading-jquery-masonry-on-mobile/
我在这里发布了一些替代方法的脚本：http:
//instancia.net/loading-jquery-masonry-on-mobile/
If you use this script, edit the numbers to match yours.
如果您使用此脚本，请编辑数字以匹配您的数字。
回答by hisa_py
On Firefox and on my iPad 2 masonry was working fine but in chrome and safari on OS X the elements were overlapping/stacking on page load and until a window resize even happen. After digging in the code of jquery.masonry.js I found that I can trigger a resize() right after creating the masonry so that all elements rearrange properly. Now everything is working fine.
在 Firefox 和我的 iPad 2 masonry 上工作正常，但在 OS X 上的 chrome 和 safari 中，元素在页面加载时重叠/堆叠，直到窗口调整大小甚至发生。在挖掘 jquery.masonry.js 的代码后，我发现我可以在创建砌体后立即触发 resize() 以便所有元素正确重新排列。现在一切正常。
jQuery(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemsSelector: '.thumbnail',
isFitWidth: true
}).resize();
});
})
all of the other solutions: (window).load, setting width & height in CSS and on img attributes, etc, just didn't work for me.
所有其他解决方案：(window).load、在 CSS 和 img 属性中设置宽度和高度等，对我来说都不起作用。
回答by Zach Krasner
It needs heights in these browsers to display correctly like Jennifer said. I use php's getimagesize() function to get the height and width of the images. Works perfectly now.
它需要在这些浏览器中的高度才能像 Jennifer 所说的那样正确显示。我使用 php 的 getimagesize() 函数来获取图像的高度和宽度。现在完美运行。
回答by Miguel Hernández Von Hartmann
<script>
var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
itemSelector: '.item',
"columnWidth": 200,
});
$('.item img').load(function(){
var msnry = new Masonry( container, {
itemSelector: '.item',
"columnWidth": 200,
});
})
</script>
回答by viet nam
if use $('img').load(function() F5(refesh) => error
如果使用 $('img').load(function() F5(refesh) => 错误
New Methods:
新方法：
$(window).on('load resize', function() {
if ($('.masonry-wrap').length) {
$('.masonry-wrap')
.css('max-width', $(window).width());
}
});
$(window).on('load', function() {
if ($('.masonry-wrap').length) {
setTimeout(function() {
$('.masonry').masonry({
columnWidth: 0,
itemSelector: '.grid-item'
});
}, 1);
}
});<div class="masonry-wrap">
<div class="masonry">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
....
</div>
</div>