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

Question

I know alot has been written about this, but I feel I am close to solving the issue.

I am trying to use a theme which has masonry installed, but now the client is asking for infinite scroll and this is causing me issues.

Initially I was seeing errors in the console for both the masonry and infinite scroll plugins, now at least I am only seeing a masonry error. And it does look as though the infinite scroll function is calling subsequent pages of posts, it's just that Masonry is struggling to append them to the page in the right layout.

I think it is something to do with my callback function, but worried I may also need to call an imagesLoaded function (this plugin is also called via the theme).

I have a copy of the current theme here: http://kod-temp.tumblr.com/

The inline script looks like this:

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

The markup follows a simple block like this:

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

The error is:

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

( http://static.tumblr.com/qlf79cn/tGeleg9g0/masonry.js )

Answer 1

Well I finally have some working code on this. The js now looks like this:

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

The imagesLoaded script was required (as this question has also been raised by me here ).