砌体JS重叠项目

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

砌体项目位于页脚上方的主页下方。 如您所见，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

Answer 3

谢谢你的解决方案在用jQuery（window）.on（’load’，function（）{替换document.ready之后工作。

Answer 4

我用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 }); } 

Answer 5

使用ImagesLoaded库，专门用于在加载每个图像时重新组织块。

您可以从以下位置下载：

https://github.com/desandro/imagesloaded

Answer 6

窗口加载后装载砖石对我有用。

 jQuery(window).on('load', function(){ //masonry init and options // .. codes } 

谢谢。