Masonry JS 重叠项目

我这里有一个非常奇怪的问题：[推荐链接已删除]。第一行产品项目与第二行中的项目重叠。

砌体项目位于主页下方页脚上方。如您所见，Chrome 看起来有所不同。在火狐浏览器中，看起来不错。

这是它在我的 chrome 中的样子：http://clip2net.com/s/5LIRko http://clip2net.com/s/5LIRko

我的 jQuery 代码是：

jQuery(function($){
var $container = $('.woocommerce ul.products');
    $container.masonry({
          columnWidth:10, 
          gutterWidth: 15,
          itemSelector: '.product-category'
    });
});

是否有影响行输出的 CSS 规则？

问题是你的图片。当调用 masonry 时，您的图像尚未加载。因此，它假设元素的高度，而不考虑图像的高度。

如果在缓存图像后刷新屏幕，您将看到它已正确加载。如果您随后清除缓存并刷新，您将看到它们再次重叠。

Four Five options:

• 等待图像加载完成（例如，有些插件可以等待某个 div 内的所有图像都加载完毕）
• 等待加载事件而不是就绪事件。而不是使用jQuery(function($){ use jQuery(window).on('load', function(){ var $ = jQuery;你就会看到结果。
• 图像加载后重新应用砌体（不喜欢这个......你会看到闪烁）
• 我最喜欢的，这里不要使用砖石！禁用页面上的 JS 并查看布局。这就是你想要的。所有 div 的高度和宽度都是均匀的。这里没有真正理由使用砖石。只需浮动元素并让它们自然地显示在网格中即可。
• 编辑：另一种选择。指定 div 的高度，以便高度不依赖于它加载的图像。