infinite scroll + masonry overlap

Question

I'm testing my theme with the Twitter behavior (load more button), but I have a problem.

If the posts are all squared the posts doesn't overlap when clicking the "Load more" button. But if the posts has automatic heights, the posts overlap.

I already looked for a solution in here, but none worked to me.

If I'm doing something wrong just tell me.

This is my code:

$(function () {
    var $container = $('#posts-container')
    $container.infinitescroll({
        navSelector: '.infinite_scroll',
        nextSelector: '.infinite_scroll a',
        itemSelector: '.posts',
        behavior: 'twitter',
        loading: {
            msgText: "",
            finishedMsg: '',
            img: 'data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw=='
        },
    }, function (newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function () {
            $newElems.animate({
                opacity: 1
            });
            container.masonry('appended', $newElems, true);
        });
    });

});

var $container = $('#posts-container');
$container.masonry({
    columnWidth: 1,
    itemSelector: '.posts'
});

And my blog: http://paulirea.tumblr.com/

Answer 1

The problem is happening because there is a static height on #posts-container (eg 665px ) but when you load more posts, #posts-container needs to be taller to accommodate the extra items. A search for "masonry adjust height" returns a few encouraging solutions. Try adding this to your imagesLoaded function:

$('#posts-container').masonry('reload');