砌体JS重叠项目

Question

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

砌体项目位于页脚上方的主页下方.如您所见,Chrome看起来与众不同.在Firefox中,它看起来不错.

以下是我在Chrome中的外观:http://clip2net.com/s/5LIRko

我的jQuery代码是:

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

是否存在影响行输出的css规则？

Answer 1

问题是你的图像.在调用砖石时,您的图像尚未加载.所以它假设你的元素的高度没有图像的高度被考虑在内.

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

四个五个选项:

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

Answer 2

在加载所有图像后,您需要启动Masonry.如果您正在使用jQuery尝试:

var $container = $('#container');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
  $container.masonry();
});

对于其他选项,请参阅Masonry docs - http://masonry.desandro.com/layout.html#imagesloaded