Masonry grid layout with scaling to fit container

Question

So I'm trying to do something like this: http://prothemeus.com/demo/litho/

I've come across: http://masonry.desandro.com/, http://isotope.metafizzy.co/ and http://packery.metafizzy.co/ all of them are really similar but none of them offer the scaling like the website at top does. How would I go about creating something like that with one of these plugins or does anyone know of one that offers the option to scale to fit container by default?

As far as the demo goes, I was able to find out that isotope handles the layout but I wasn't able to track down the code that does the actual scaling.

Any help would be greatly appriciated.

Answer 1

I finished with ignoring all the plugins, only the smartresize which I minified because it uncompressed wherever I found it. Not sure if it was from Paul Irish or someone else, either way here's the jsfiddle for it. http://jsfiddle.net/matthewabrman/6R2DU/

//smartresize
(function(e,t){var n=function(e,t,n){var r;return function(){function u(){if(!n)e.apply(s,o);r=null}var s=this,o=arguments;if(r)clearTimeout(r);else if(n)e.apply(s,o);r=setTimeout(u,t||100)}};jQuery.fn[t]=function(e){return e?this.bind("resize",n(e)):this.trigger(t)}})(jQuery,"smartresize")

function redraw_UI() {
    var content_width = $('.content').width()+20;
    images_per_row = Math.floor(content_width / 240);
    var width = Math.round(content_width / images_per_row);
    var height = Math.round(width/3*2);
    $('.content .item').each(function(id){
        var x = Math.round((id % images_per_row) * width);
        var y = Math.floor(id/images_per_row) * height + Math.floor(id/images_per_row) * 20;
        if (navigator.appName.indexOf("Internet Explorer")!=-1){
            $(this).animate({width: width-20+'px', height: height+'px', left: x, top: y},600);
        } else {
            $(this).css({'width': width-20+'px', 'height': height+'px', 'left': x, 'top': y });
        }
    });

    if (images_per_row == 1) {
        closeImagePreview();
    }
}

$(window).smartresize(redraw_UI);
$(window).ready(redraw_UI);

Answer 2

Masonry does support this using the bindResize method: http://masonry.desandro.com/methods.html#bindresize

$container.masonry(options);
$container.masonry('bindResize')

This will trigger a layout on resize. You could also do

$(window).resize(function () {
   $container.masonry();
});

which will trigger a re-layout, though you should throttle it to avoid it being called to offten. This will scale to fit the container by default.

What you then have to do is make the container responsive so that it resizes according to the window size. For that you can look into bootstrap or roll your own.