無限滾動+砌體重疊

Question

我正在測試Twitter行為（加載更多按鈕）的主題，但是我遇到了問題。

如果帖子都是方形的，則在單擊“加載更多”按鈕時，帖子不會重疊。 但是，如果立柱具有自動高度，則立柱會重疊。

我已經在這里尋找解決方案，但是沒有一個對我有用。

如果我做錯了，請告訴我。

這是我的代碼：

$(function () {
    var $container = $('#posts-container')
    $container.infinitescroll({
        navSelector: '.infinite_scroll',
        nextSelector: '.infinite_scroll a',
        itemSelector: '.posts',
        behavior: 'twitter',
        loading: {
            msgText: "",
            finishedMsg: '',
            img: 'data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw=='
        },
    }, function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            container.masonry('appended', $newElems, true);
        });
    });

});

var $container = $('#posts-container');
$container.masonry({
    columnWidth: 1,
    itemSelector: '.posts'
});

而我的博客： http : //paulirea.tumblr.com/

Answer 1

發生問題是因為#posts-container上有一個靜態高度（例如665px ），但是當您加載更多帖子時， #posts-container需要更高以容納更多項目。 搜索“砌體調整高度”將返回一些令人鼓舞的解決方案。 嘗試將其添加到您的imagesLoaded函數中：

$('#posts-container').masonry('reload');