Responsive Masonry jQuery layout example

Question

Can anyone suggest how this site uses the jQuery Masonry plugin for its responsive, fluid layout?

http://tympanus.net/codrops/collective/collective-2/

Specifically;

The number of columns changes from 3 to 2 to 1 on browser resize which is what you expect from a site using masonry, but what's interesting is the columns also resize to always fill the full width available. Most other Masonry sites I've seen leave gaps to the right of the columns as the number of columns changes (e.g http://masonry.desandro.com/) OR the columns fill the full width but the number fo columns stays the same (http://masonry.desandro.com/demos/fluid.html). Are they dynamically setting the number of columns on browser resize combined with CSS media queries or maybe they're using CSS3 columns?

Thanks.

Molarity

We must not be seeing the same thing, because it doesn't do that for for me: i.sstatic.net/08sMz.png I think they're just using the standard Masonry example with animation (didn't look). You can always check out the source code yourself... – Spectra

Strange, in OS X Lion using Chrome 17, Safari 5.1.2 or Firefox 9.0.1 it looks like this; cl.ly/DjIr. I had a look at the sourcecode but couldn't work out how it was done. – Molarity

Answer 1

This is the Code we are looking at.

jQuery(document).ready(function($) {
    var CollManag = (function() {
        var $ctCollContainer = $('#ct-coll-container'),
        collCnt = 1,
        init = function() {
            changeColCnt();
            initEvents();
            initPlugins();
        },
        changeColCnt = function() {
            var w_w = $(window).width();
            if( w_w <= 600 ) n = 1;
            else if( w_w <= 768 ) n = 2;
            else n = 3;
        },
        initEvents = function() {
            $(window).on( 'smartresize.CollManag', function( event ) {
                changeColCnt();
            });
        },
        initPlugins = function() {
            $ctCollContainer.imagesLoaded( function(){
                $ctCollContainer.masonry({
                    itemSelector : '.ct-coll-item',
                    columnWidth : function( containerWidth ) {
                        return containerWidth / n;
                    },
                    isAnimated : true,
                    animationOptions: {
                        duration: 400
                    }
                });
            });
            $ctCollContainer.colladjust();
            $ctCollContainer.find('div.ct-coll-item-multi').collslider();
        };
        return { init: init };
    })();
    CollManag.init();
}); 

The Basic idea seems to be to add a columnselector which finds out how many columns can be set. Second step is to use the smartresize event in the function. Third step is to call masonry with the "dynamic" width of columns. Have fun :)

Catechetical

Thanks some_guy, that worked a treat. I just needed to add some media queries to set the max-width of .ct-coll-item at 600 and 768. – Molarity

Good to know that it works. and thanks for adverting my attention to it, I was also searching for sth similar and I guess I will now try and implement this into my site as well! – Catechetical

can u plz elaborate it with some example i am searching for the same – Wernsman