以一定速度滚动时，砌体和无限滚动打破布局答案

【问题标题】：Masonry and Infinite Scroll breaking layout when scrolling at certain speed以一定速度滚动时，砌体和无限滚动打破布局
【发布时间】：2011-01-27 22:30:01
【问题描述】：

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

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

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

【问题讨论】：

我尝试在 Firefox、Safari 和 Chrome 中查看您的页面，一切似乎都很好。我滚动了一段时间，但没有看到任何奇怪的中断。你试过其他浏览器了吗？

标签： javascript jquery jquery-masonry infinite-scroll

【解决方案1】：

好吧，我看不到您要查看的页面的链接（并且图像不可用），但根据我过去的砌体经验，每当页面大小发生重大变化时（重新调整大小、滚动、 re-sized 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
        });
    });
});

【讨论】：

【解决方案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，以防万一您更改了它。

【讨论】：