Using jQuery Masonry Many times in the same site

I’m trying to use jQuery masonry 3 times on the same site. Each code block works independently but when trying to use all 3 at once, only the last one works. How can I combine these to work yet keep the different values and selectors each has?

/** First Instance **/
    var $container = $('.smallcolwrap');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.smallcol',
            columnWidth: function( containerWidth ) {
                return containerWidth / 3; },
            isAnimated: true
          });
        });

    /** Second Instance **/
    var $container = $('.slickr-flickr-gallery');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : 'li',
            columnWidth: 160,
            isAnimated: true
          });
        });

    /** Third Instance **/  
    var $container = $('.navigationHome');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : 'li',
            columnWidth: function( containerWidth ) {
                return containerWidth / 2; },
            isAnimated: true,
                animationOptions: {
                duration: 250,
                easing: 'linear',
                queue: false
                }
          });
        }); 
{o}
Otreva is a custom software product development company focusing on user experience, responsive web development, & mobile application development.

Interested in seeing what it costs to build an app?

Start Quote See Stats
224 Wyoming Ave. #100
Scranton, PA 18503

You've found the secret footer!

Tweets about @Otreva

Or check us out on:

Shopify Experts
Awwwards