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

I never used jsfiddle but I did this : http://jsfiddle.net/Sfmv9/ Hope that help ;)) — Chris, Jul 27 '13 at 09:42
You need to include the path to the masonry and infinite scroll libraries. — designtocode, Jul 27 '13 at 15:47
And the script tags into the html section in your jsfiddle.net/Sfmv9 Upload it to a online server and link it in the src attribute for the script — designtocode, Jul 28 '13 at 14:35
@msbodetti : I already put all scripts in the "External Resources" of jsfiddle — Chris, Jul 28 '13 at 17:59

score 0 · Answer 1 · answered Jul 28 '13 at 18:09

0

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

answered Jul 28 '13 at 18:09

designtocode

2,215
4
21
35

Thanks @msbodetti but I cannot see the difference ! All items are displayed at once. – Chris Jul 28 '13 at 18:50
Thanks for your help ! Masonry is working but I'm interested to work with Infinite Scroll too. This is what I'm looking for ;)) – Chris Jul 29 '13 at 14:30
Infinite Scroll doesn't seem to have good documentation, how about using AnimOnScroll? The masonry plugin uses it as well, it works really well with it http://jsfiddle.net/Sfmv9/19/embedded/result/ – designtocode Jul 30 '13 at 10:09

jQuery Infinite Scroll with Masonry

1 Answers1