砖石布局JS重叠项

Question

砖石布局JS重叠项

jquerycssjquery-masonry

24

我这里有一个非常奇怪的问题：[转介链接已删除]。第一行产品项目与第二行项目重叠。

瀑布流项目在首页上方，位于页脚下方。正如您所看到的，使用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规则会影响行输出？

- Jed

只是好奇，你在使用砖石布局做什么？它们看起来都是相同的大小。这与“砖石”无关。如果我在页面上禁用JavaScript并刷新，则网格布局看起来符合预期。 - Eli Gassert

是的，但我想知道为什么你需要砖石布局。我看到了错误，但我不明白相比于浮动元素，砖石布局为你解决了什么问题。请参考下面的回答。 - Eli Gassert

我使用了砖石布局，以便在响应式部分看起来很好。我只想在调整大小时为动画功能添加砖石布局。 - Jed

好的，没问题。那么请看下面我的选项#2的回应，即jQuery(window).on('load'。 - Eli Gassert

8个回答

17

您需要在所有图片加载完成后启动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

- Zbigniew Ledwoń

3

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

您可以从以下链接下载:

https://github.com/desandro/imagesloaded

- Carlos Angulo

你能否增加更多关于它如何使用的细节。 - JGallardo

2

我使用了settimeout函数解决了这个问题。通过让一秒左右的时间（取决于要下载的图像数量和文件大小），您可以先下载图像，然后应用masonry。

                $(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
                });                         
            }

- Jeff Shain

感谢您的解决方案，在将 document.ready 替换为 jQuery(window).on('load', function(){ 后，它可以正常工作。 - ziaprog

在第二次加载之前，masonry（'destroy'）是一个有效的解决方案。 - Vijay Kumar Kanta

2

使用CSS为图像添加最小高度即可解决该问题，将会修复它。

原始答案翻译成"最初的回答"。

.image{ min-height: 250px; }

- Disapamok

0

在窗口加载后加载砌体对我有效。

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

- sybozz

0

这很可能是因为您太早导入了js，它没有目标可以执行，尝试在导入中添加“defer”，您可以像这样操作：

<script type='text/javascript' src='src/js/mensory-min.js' defer></script>

关键是在导入的末尾添加defer，这将使它在整个页面加载后再加载。

P.S. 给网格项设置高度不会解决任何问题，因为它处于绝对位置。

- user13599162

-2

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

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

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

- 93_virus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eli Gassert · Accepted Answer

问题出在你的图片上。当masonry被调用时，你的图片还没有加载完成，所以它假设高度不包括图像高度。

如果你在图片已经被缓存后刷新屏幕，你会发现它可以正确地加载。然后你清除缓存并刷新，你会发现它们又重叠了。

五个选择：

1.等待图片加载完成（有插件可以等待某个div中的所有图片加载完成，例如）；

2.等待load事件而不是ready事件。使用jQuery(window).on('load', function(){ var $ = jQuery;})代替jQuery(function($){})，这样你就能看到结果。

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

4.我的最爱，在这里不使用masonry！禁用页面上的JS并查看布局。这是你想要的效果。所有的div都具有相同的高度和宽度。在这里没有真正需要使用masonry。只需浮动元素并让它们自然地显示在网格中即可。

5.编辑：另一种选择。指定div的高度，这样高度不取决于它正在加载的图像。