砌体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

Answer 3

我用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 4

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

您可以从以下网址下载：

https://github.com/desandro/imagesloaded

Answer 5

使用CSS为图像添加最小高度。这将解决问题。

.image{ min-height: 250px; }

Answer 6

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

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