jquery - 带有砌体的 jQuery 无限滚动

Question

我正在使用 Masonry 和 Infinite Scroll 但下面的代码不起作用！是不是我忘记了我的 HTML 中的某些内容？所有项目一次显示！

<div id="containerPost">
<div id="post119" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 1</p>
</div>
<div id="post118" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 2</p>
</div>
<div id="post117" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 3</p>
</div>
<div id="post116" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 4</p>
</div>
... and so on

    var $container = $('#containerPost');
$container.infinitescroll({
        navSelector  : '.pagination',    
        nextSelector : '.pagination a',
        itemSelector : '.item',
        loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    function( newElements ) {
        var newElems = $( newElements );
        newElems.css({ opacity: 0 });
        newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', newElems); 
    }
);
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item'
    });
})

谢谢你的帮助...

克里斯

Answer 1

砌体现在正在工作。

而不是这个：

$container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.item'
        });
    })

使用http://masonry.desandro.com/上的文档中的这个：

$container.masonry({
       itemSelector: '.item'
    });

您可能应该使用另一个函数来使用 imagesloaded 插件。

查看更新的小提琴