jQuery Infinite Scroll with Masonry

Question

I'm using Masonry and Infinite Scroll but the code below doesn't work ! Is that I forgot something in my HTML ? All items are displayed at once !

<div id="containerPost">
<div id="post119" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 1</p>
</div>
<div id="post118" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 2</p>
</div>
<div id="post117" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 3</p>
</div>
<div id="post116" class="item rubColor1" style="padding-bottom:10px">
    <p style="text-align:left;padding:5px 5px;font-weight:700">Test 4</p>
</div>
... and so on

    var $container = $('#containerPost');
$container.infinitescroll({
        navSelector  : '.pagination',    
        nextSelector : '.pagination a',
        itemSelector : '.item',
        loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    function( newElements ) {
        var newElems = $( newElements );
        newElems.css({ opacity: 0 });
        newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', newElems); 
    }
);
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item'
    });
})

Thanks for your help...

Chris

Answer 1

The masonry is working now.

Instead of this:

$container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.item'
        });
    })

Use this from the docs on http://masonry.desandro.com/ :

$container.masonry({
       itemSelector: '.item'
    });

You probably should use another function to use the imagesloaded plugin.

View updated fiddle