Infinite Scroll + Masonry

Question

I am trying to get infinite scroll to work with Masonry.

    +function ($) {

var $container = $('.masonry');

$container.imagesLoaded(function(){
    $container.masonry({
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer',
        itemSelector: '.item'
    })
});

$container.infinitescroll({
    navSelector  : '#page-nav',    // selector for the paged navigation
    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.item',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        });
    }
);


}(jQuery);

It seems if I remove the imagesLoaded function and just call the masonry, it shows the images how Masonry intended, but doesn't infinitely scroll.

As it is I get an error:

Uncaught TypeError: undefined is not a function

I am using Foundation and I am calling my scripts in this order:

@import 'vendor/masonry.pkgd.js';
@import 'vendor/jquery.infinitescroll.min.js';

@import 'scripts.js';

Scripts included the code I have highlighted at the start. jQuery version is 2.0.3

Answer 1

you will have to add the imagesloaded library.

try this code

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

    (function() {

    // Main content container
    var $container = $('.masonry');

    // Masonry + ImagesLoaded
    $container.imagesLoaded(function(){
        $container.masonry({
            // selector for entry content
             columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.item'
        });
    });

    // Infinite Scroll
    $container.infinitescroll({

        // selector for the paged navigation (it will be hidden)
        navSelector  : "#page-nav",
        // selector for the NEXT link (to page 2)
        nextSelector : "#page-nav a",
        // selector for all items you'll retrieve
        itemSelector : ".item",

        // finished message
        loading: {
             finishedMsg: 'No more pages to load.',
             img: 'http://i.imgur.com/6RMhx.gif'
            }
        },

        // Trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });

    });

    /**
     * OPTIONAL!
     * Load new pages by clicking a link
     */

    // Pause Infinite Scroll
    $(window).unbind('.infscr');

    // Resume Infinite Scroll
    $('.#page-nav a').click(function(){
        $container.infinitescroll('retrieve');
        return false;
    });
})();