砖石JS重叠项目 [英] Masonry JS Overlapping Items

问题描述

我在这里有一个很奇怪的问题： http://genesis.ecoverbuddy.com/ 。第一行产品项目与第二行中的项目重叠。

I have a very strange problem in here: http://genesis.ecoverbuddy.com/. The first row product items overlapped with the items in the second row.

砌体物品位于页脚上方的首页下方。如您所见，Chrome看起来不一样。在firefox中，它看起来不错。

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的外观： http： //clip2net.com/s/5LIRko

Here's how it looks in my chrome: http://clip2net.com/s/5LIRko

我的jQuery代码是：

My jQuery Code is:

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

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

Is there any css rule which affects the row output ?

推荐答案

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

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.

如果在图片已缓存后刷新屏幕，您会看到它正确加载。

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.

四个五个选项：

• 等待，直到图像完成加载（有插件，您可以等待，直到所有图像在某个div加载，例如）


• 等待加载事件，而不是就绪事件。代替使用 jQuery（function（$）{使用 jQuery（window）.on（'load'，function（）{var $ = jQuery; ，你会看到结果。


• 在图片加载后重新应用砖石（不喜欢这个...你会看到闪烁）


• 我最喜欢的，不要在这里使用masonry禁用JS在你的页面，看看布局。这是你想要的所有的div是甚至高度甚至宽度。


• 编辑：另一个选项指定div的高度，因此高度不依赖于

• 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($){ use jQuery(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.
• another option. Specify a height of the divs so the height doesn't depend on the images it's loading.

这篇关于砖石JS重叠项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！