砌体重叠答案

【问题标题】：Masonry Overlap砌体重叠
【发布时间】：2015-01-30 19:36:36
【问题描述】：

我注意到我的砌体页面正在创建重叠和不等间距。这并不一致，有时似乎会发生，而在其他时候却可以正常工作。在每种情况下，如果我稍微调整窗口大小，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>

【问题讨论】：

标签： jquery-masonry masonry

【解决方案1】：

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

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

500 毫秒超时是任意的，因此我会在您的页面上尝试使用该超时，以找到仍能解决您的问题的最低值。希望对您有所帮助！

干杯，

杰克

【讨论】：

【解决方案2】：

你应该使用：

$container.masonry('reloadItems');

在 mason() 函数上，所有东西都会被替换到正确的位置。

【讨论】：