砌体 JS 重叠项目

Question

我有一个很奇怪的问题：[Referral Link Removed]。第一行产品项目与第二行中的项目重叠。

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

$(window).on('load',function(){ });

$(window).on('load',function(){
//code
});

//use load event instead of document.ready starting of jquery

Answer 2

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

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

Answer 3

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

.image{ min-height: 250px; }

Answer 4

您需要在加载完所有图像后启动 Masonry。 如果您使用的是 jQuery，请尝试：

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

有关其他选项，请参阅 Masonry 文档 - http://masonry.desandro.com/layout.html#imagesloaded

Answer 5

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

您可以从以下网址下载：

https://github.com/desandro/imagesloaded

Answer 6

我已经用 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 7

问题在于您的图像。在调用 masonry 时，您的图像尚未加载。所以它假设你的元素的高度没有考虑到图像的高度。

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

四个五个选项：

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