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');

无限滚动+砌体重叠

1 个答案: