以特定速度滾動時的砌體和無限滾動打破布局

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 。