Javascript 与tumblr中的无限滚动一起使用时返回错误

我知道有很多关于这方面的文章，但我觉得我已经接近解决这个问题了

我试图使用一个安装了砖石的主题，但现在客户端要求无限滚动，这给我带来了问题

起初，我在控制台中看到了砌体和无限滚动插件的错误，现在至少我只看到了砌体错误。而且看起来好像无限滚动函数正在调用后续的文章页面，只是砖石正在努力将它们添加到正确布局的页面中

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

我这里有一份当前主题的副本：

内联脚本如下所示：

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

(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
        });
    });
})();

标记遵循如下简单的块：

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

---

我终于有了一些关于这方面的工作代码。js现在看起来像这样：

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

(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脚本