jquery砌体在chrome/safari中打破(堆叠图像)但仅在第一次加载时

Question

似乎当我尝试加载页面时,所有图像都堆叠在一起.但是如果你点击链接将你带到同一个页面(比如主页链接),那么砌体就会启动.所以我认为砌体加载太早,就像jquery准备页面之前一样.

在这里我的jquery调用:

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

这是有问题的页面:

http://ratattoos.com/

它在firefox和IE8中运行得很好.

Answer 1

我已通过以下调整设法解决了这个问题:

<script type="text/javascript">
    $(document).ready(function(){
        $('img').load(function(){
            $(".content_photo").masonry();
        });
        $(".content_photo").masonry();
    });
</script>

Answer 2

看起来我需要一个名为imagesLoaded的插件,以便Monsry脚本能够正常使用chrome和safari

Answer 3

尝试了这个线程中建议的一切,没有任何效果,然后发现这个:

$(window).load(function(){   $('#content').masonry(); });

现在工作正常,在这里找到它:https: //github.com/desandro/masonry/issues/35

原作者:https: //github.com/desandro

Answer 4

您对图像加载是正确的。它在 Firefox 中运行良好，但在 Chrome/Safari 中堆叠。

这是链接https://masonry.desandro.com/layout.html#imagesloaded

代码：

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});