jquery - 砌体 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规则？

score 68 · Accepted Answer

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

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

四五选择：

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

score 14 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

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

您可以从以下位置下载它：

https://github.com/desandro/imagesloaded

score 1 · Accepted Answer

1

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

.image{ min-height: 250px; }

于 2019-04-10T07:33:40.643 回答

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

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

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

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

jquery - 砌体 JS 重叠项目

7 回答 7

Related

Reference