jQuery Masonry JS 重叠项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18849296/
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
Masonry JS Overlapping Items
提问by Jed
I have a very strange problem in here: [Referral Link Removed]. The first row product items overlapped with the items in the second row.
我在这里有一个非常奇怪的问题：[推荐链接已删除]。第一行产品项目与第二行项目重叠。
The masonry items are below the homepage above the footer. As you can see, it looks different with Chrome. In firefox, it looks good.
砌体项目位于页脚上方的主页下方。如您所见，Chrome 看起来有所不同。在 Firefox 中，它看起来不错。
Here's how it looks in my chrome: http://clip2net.com/s/5LIRko
这是它在我的 chrome 中的样子：http: //clip2net.com/s/5LIRko
My jQuery Code is:
我的 jQuery 代码是：
jQuery(function($){
var $container = $('.woocommerce ul.products');
$container.masonry({
columnWidth:10,
gutterWidth: 15,
itemSelector: '.product-category'
});
});
Is there any css rule which affects the row output ?
是否有任何影响行输出的 css 规则？
回答by Eli Gassert
The problem is your images. By the time masonry is called, your images haven't loaded. So it's assuming the height of your elements WITHOUT the height of the image being factored in.
问题是你的图像。调用 masonry 时，您的图像尚未加载。所以它假设你的元素的高度没有考虑图像的高度。
If you refresh your screen after the images are already cached, you'll see that it loads correctly. If you then clear cache and refresh, you'll see they overlap again.
如果在图像已缓存后刷新屏幕，您将看到它正确加载。如果您随后清除缓存并刷新，您会看到它们再次重叠。
FourFive options:
四五个选项：
- Wait until the images are finished loading (there are plugins that you can wait until all images inside a certain div are loaded, for example)
- Wait for the load event instead of the ready event. Instead of using
jQuery(function($){usejQuery(window).on('load', function(){ var $ = jQuery;and you'll see the results. - Re-apply masonry after the images load (Don't like this one... you'd see flicker)
- My favorite, don't use masonry here! Disable JS on your page and look at the layout. It's what you want. All the divs are even heights and even widths. There's not really a reason to use masonry here. Just float your elements and let them display in the grid naturally.
- EDIT: another option. Specify a height of the divs so the height doesn't depend on the images it's loading.
- 等到图像加载完成（例如，有一些插件可以等到某个 div 中的所有图像都加载完毕）
- 等待加载事件而不是就绪事件。而不是使用
jQuery(function($){usejQuery(window).on('load', function(){ var $ = jQuery;，你会看到结果。 - 图像加载后重新应用砌体（不喜欢这个......你会看到闪烁）
- 我的最爱，不要在这里使用砖石！在您的页面上禁用 JS 并查看布局。这就是你想要的。所有的 div 都是均匀的高度和均匀的宽度。没有真正的理由在这里使用砖石。只需浮动您的元素，让它们自然地显示在网格中。
- 编辑：另一种选择。指定 div 的高度，以便高度不依赖于它正在加载的图像。
回答by Zbigniew Ledwoń
You need to initiate Masonry after all images are loaded. If you are using jQuery try:
加载所有图像后，您需要启动 Masonry。如果您使用 jQuery，请尝试：
var $container = $('#container');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry();
});
for other options see Masonry docs - http://masonry.desandro.com/layout.html#imagesloaded
有关其他选项，请参阅 Masonry 文档 - http://masonry.desandro.com/layout.html#imagesloaded
回答by Jeff Shain
I've solved this issue with a settimeout function. By allowing a second or so to pass (depending on the # and file size of the images being downloaded) you can download the images first then apply masonry.
我已经用 settimeout 函数解决了这个问题。通过允许一秒钟左右的时间（取决于正在下载的图像的# 和文件大小），您可以先下载图像然后应用砌体。
$(document).ready(function(){
setTimeout(function() { masonry_go();masonry_go2();}, 1000);
});
$(window).resize(function()
{
// jQuery
$('.grid').masonry( 'destroy')
$('.grid2').masonry( 'destroy')
setTimeout(function() { masonry_go();masonry_go2();}, 1000);
});
function masonry_go(){
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 300
});
}
function masonry_go2(){
$('.grid2').masonry({
// options
itemSelector: '.grid-item2',
gutter: 15,
columnWidth: 200
});
}
回答by Carlos Angulo
Use the ImagesLoaded library, is made specially to reorganize the blocks when each image is loaded.
使用 ImagesLoaded 库，专门用于在加载每个图像时重新组织块。
You can download it from:
您可以从以下网址下载：
回答by Sahan
Add minimum height for images with CSS. That would fix the issue.
使用 CSS 为图像添加最小高度。那将解决问题。
.image{ min-height: 250px; }
回答by sybozz
Loading masonry after window load works for me.
在窗口加载后加载砖石对我有用。
jQuery(window).on('load', function(){
//masonry init and options
// .. codes
}
回答by 93_virus
$(window).on('load',function(){ });
$(window).on('load',function(){ });
$(window).on('load',function(){
//code
});
//use load event instead of document.ready starting of jquery