JQuery Masonry breaks after first image, loads with strange gaps

Question

I'm implementing Masonry with Infinite Scroll on a Tumblr theme -- something I've successfully done before, but I just can't get this one to stop "breaking" and scattering the images around. Getting desperate!

Live demo at neuraldamage-theme4.tumblr.com (password is guest).

I've tried removing everything from the body tag except for the #posts div and its contents (and of course the script), but the problem persisted -- so it seems like this shouldn't be an issue with the surrounding divs.

Here's my script:

$(document).ready(function() {
    $('#post-video iframe').attr('width', '300');   // resize embedded videos
});

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

$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.post',
        columnWidth : 300
    });
});

$container.infinitescroll({
    navSelector  : '#pagination',    // selector for the paged navigation 
    nextSelector : '#pagination li a.pagination_nextlink',  // selector for the NEXT link (to page 2)
    itemSelector : '.post',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: '',
        img: 'http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif',  // http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif, http://static.tumblr.com/6u5yyqj/yWkmgj1jq/loadingdark.gif
    }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        var $newElems = $( newElements );
        $container.masonry( 'appended', $newElems );
    }
);

And here's what I have embedded, just made sure it was all up to date:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/MPKmktfkv/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/nsQmkth3k/jquery.infinitescroll.min.js"></script>

And if you'd like to see the full code: gist.github.com/neuraldamage/5307289

If anyone could take a crack at this, I'd be greatly appreciative!

Answer 1

It's running into a bunch of problems because you actually have multiple <div id="posts"> on the page. Likely a problem with your Tumblr code spitting out more than it should.