当与tumblr中的Infinite Scroll一起使用时，砌体插件返回错误

Question

我知道已经写了很多有关此的文章，但是我觉得我已经接近解决问题了。

我正在尝试使用已安装砖石的主题，但是现在客户端要求无限滚动，这导致了我的问题。

最初，我在控制台中看到砖石和无限滚动插件的错误，现在至少我仅看到砖石错误。 而且看起来无限滚动功能正在调用帖子的后续页面，只是Masonry努力将它们以正确的布局添加到页面中。

我认为这与我的回调函数有关，但担心我可能还需要调用imagesLoaded函数（此插件也通过主题调用）。

我在这里有当前主题的副本： http : //kod-temp.tumblr.com/

内联脚本如下所示：

var $wall = $('#posts');

$(window).load(function () {
// Grid
    $wall.masonry({
    columnWidth: 84, 
    itemSelector: '.post:visible'
});

// infinite scroll
$('#posts').infinitescroll({
    navSelector  : ".pagination", // selector for the paged navigation (it will be hidden)
    nextSelector : ".pagination a:first", // selector for the NEXT link (to page 2)
    itemSelector : "#posts .post" // selector for all items you'll retrieve
},
// trigger Masonry as a callback
function( newElements ) {
    var $newElems = $( newElements );
    $wall.masonry( 'appended', $newElems );
    }
);

标记遵循一个简单的块，如下所示：

<div id="posts">
    <article class="post"></div>
</div>

错误是：

 Uncaught TypeError: undefined is not a function 
 masonry.js:10

（ http://static.tumblr.com/qlf79cn/tGeleg9g0/masonry.js ）

Answer 1

好吧，我终于有了一些有效的代码。 js现在看起来像这样：

(function () {
    var $tumblelog = $('#posts');
    $tumblelog.infinitescroll({
        navSelector: ".pagination",
        nextSelector: ".pagination a:last-child",
        itemSelector: "article",
    }, function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function(){
            $newElems.animate({
                opacity: 1
            });
            $tumblelog.masonry('appended', $newElems);
        });
    });
    $tumblelog.imagesLoaded(function(){
        $tumblelog.masonry({
            columnWidth: 84
        });
    });
})();

需要使用imagesLoaded脚本（因为我在这里也提出了这个问题）。