以特定速度滚动时的砌体和无限滚动打破布局

Question

我有一个宽度可变的主题，正在使用jQuery Masonry和Infinite Scroll。 问题是，如果您以一定的速度滚动（不太快也不太慢），页面可能会导致网格中断。 我只在两栏和Firefox中看到了这一点：

有人知道为什么会这样吗？ 我知道这可能是很多事情，但是如果有人对此有经验并知道发生了什么，那将有很大帮助。

更新：中断发生在页面上的最后一个帖子之后。 无限滚动的回调会生成之后的内容。

Answer 1

好吧，我看不到要查看的页面链接（并且该图像不可用），但是根据我过去的砌体经验，只要页面大小发生重大变化（调整大小，滚动，调整大小） divs），则需要再次触发它：

jQuery(document).ready(function() {
    jQuery("#somediv").click(function() {
        jQuery('#leftcol').toggle(700); //div resizing start here
        jQuery('#somediv2').toggleClass("minside");
        jQuery('#somediv').toggleClass("full"); // evoke again after change..
        jQuery('#container').masonry({
            itemSelector : '.item',
            columnWidth : 240
        });
    });
});

Answer 2

将此添加为无限滚动的回调，您的问题将消失……至少对我有用：

// trigger Masonry as a callback
function (newElements) {
    // hide new items while they are loading
    var $newElems = $(newElements).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function () {
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry('appended', $newElems, true);
    });

});

以防万一您更改了$container 。