砌体重叠

Question

我注意到我的砌体页面正在创建重叠和不等间距。这不是一致的，有时似乎发生，而在其他时候它工作正常。在每种情况下，如果我稍微调整窗口大小，mason（）函数会启动并修复它。我原本以为这是一个必须等​​待图像加载的问题（一次加载大约30个），但我已经实现了imagesLoaded并且看不出任何区别。谁能指出我的错误？

<script>  
   function mason() {
    var $container = $('#dealcontainer').masonry({
            itemSelector: '.outerdeal',
            columnWidth: '.outerdeal'
        });
    $container.imagesLoaded(function(){
        $container.masonry();
    });
   }
   function colorize()
   {
    $('.dealfilterli').click(function (event) {
           if (event.target.type !== 'checkbox') {
               $(':checkbox', this).trigger('click');
           }
           $("input[type='checkbox']").change(function (e) {
               if ($(this).is(":checked")) {
                   $(this).closest('li').addClass("colorize");
               } else {
                   $(this).closest('li').removeClass("colorize");
               }
           });
       });
   }
   function InitInfiniteScroll(){
    $('#dealcontainer').infinitescroll({
        navSelector  : "div.pagination",
        nextSelector : "div.pagination li a",
        itemSelector : "#deals div.outerdeal",
        loading:{
            finishedMsg: '',
            img: 'http://www.example.com/img/icons/site/spinner.gif',
            msgText: '',
            speed: 'fast',
        },
    },function(newElements) {
        var $newElems = $( newElements );
                    $('#dealcontainer').masonry( 'appended', $newElems );
        mason();
    });
   }
   $( document ).ready(function() {
    InitInfiniteScroll();
    colorize();

   });
   $(window).resize(function() {
    InitInfiniteScroll();
    mason();
   }).resize();
</script>

Answer 1

尽管使用了imagesLoaded，但我遇到了完全相同的问题，经过大量的反复试验后，我发现问题可以通过setTimeout函数解决。这是我项目的一个例子：

setTimeout(function() {
        masonryContainer.imagesLoaded(function() {
        masonryContainer.prepend(newPost);
        masonryContainer.masonry('prepended', newPost);
        });
    }, 500);

500毫秒的超时是任意的，所以我会在你的页面上使用它来找到仍然可以解决问题的最低值。希望有所帮助！

干杯，

杰克

Answer 2

您应该使用：

$container.masonry('reloadItems');

在mason（）函数上，所有内容都将被替换为正确的位置。