带有砌体的 jQuery 无限滚动答案

【问题标题】：jQuery Infinite Scroll with Masonry带有砌体的 jQuery 无限滚动
【发布时间】：2013-07-27 13:31:06
【问题描述】：

我正在使用 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'
    });
})

感谢您的帮助...

克里斯

【问题讨论】：

你能发布你的整个 html 吗？或者把它放在 jsfiddle.net 中
我从未使用过 jsfiddle，但我这样做了：jsfiddle.net/Sfmv9 希望有帮助 ;))
您需要包含 masonry 和无限滚动库的路径。
谢谢@msbodetti，但它已经包含了！
不，我的意思是进入小提琴..

标签： jquery html scroll infinity

【解决方案1】：

现在正在砌石。

而不是这个：

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

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

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

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

View updated fiddle

【讨论】：

谢谢@msbodetti，但我看不出有什么不同！一次显示所有项目。
感谢您的帮助！ Masonry 正在工作，但我也有兴趣与 Infinite Scroll 合作。这就是我要找的 ;))
Infinite Scroll 好像没有很好的文档，用 AnimOnScroll 怎么样？ masonry 插件也使用它，它与它配合得非常好jsfiddle.net/Sfmv9/19/embedded/result