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);