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内的所有图像都被加载）
等待加载事件而不是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

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

$data = json_decode(file_get_contents('php://input'), true);
print_r($data);

Answer 7

$（window）.on（'load'，function（）{ }）;

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

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

砌体JS重叠项目

7 个答案: