Masonry

by cent cent

HTML

<div id="gallery">
    <img src="http://dummyimage.com/50x42/7c6c4c/000000.gif&amp;text=img0">
    <img src="http://dummyimage.com/50x89/2c6c2c/000000.gif&amp;text=img1">
    <img src="http://dummyimage.com/50x62/2c5c6c/000000.gif&amp;text=img2">
    <img src="http://dummyimage.com/50x58/2c3c9c/000000.gif&amp;text=img3">
    <img src="http://dummyimage.com/50x91/6c6c9c/000000.gif&amp;text=img4">
    <img src="http://dummyimage.com/50x38/8c5c9c/000000.gif&amp;text=img5">
    <img src="http://dummyimage.com/50x90/6c7c3c/000000.gif&amp;text=img6">
    <img src="http://dummyimage.com/50x57/6c4c4c/000000.gif&amp;text=img7">
    <img src="http://dummyimage.com/50x31/6c8c4c/000000.gif&amp;text=img8">
    <img src="http://dummyimage.com/50x88/4c3c4c/000000.gif&amp;text=img9">
    <img src="http://dummyimage.com/50x99/2c6c5c/000000.gif&amp;text=img10">
    <img src="http://dummyimage.com/50x79/1c1c9c/000000.gif&amp;text=img11">
    <img src="http://dummyimage.com/50x40/2c4c9c/000000.gif&amp;text=img12">
    <img src="http://dummyimage.com/50x82/7c8c1c/000000.gif&amp;text=img13">
    <img src="http://dummyimage.com/50x84/4c4c3c/000000.gif&amp;text=img14">
    <img src="http://dummyimage.com/50x78/9c5c7c/000000.gif&amp;text=img15">
    <img src="http://dummyimage.com/50x39/2c2c3c/000000.gif&amp;text=img16">
    <img src="http://dummyimage.com/50x36/2c4c3c/000000.gif&amp;text=img17">
    <img src="http://dummyimage.com/50x30/8c9c7c/000000.gif&amp;text=img18">
    <img src="http://dummyimage.com/50x99/7c6c7c/000000.gif&amp;text=img19">
    <img src="http://dummyimage.com/50x89/9c1c4c/000000.gif&amp;text=img20">
    <img src="http://dummyimage.com/50x54/2c3c1c/000000.gif&amp;text=img21">
    <img src="http://dummyimage.com/50x97/9c2c1c/000000.gif&amp;text=img22">
    <img src="http://dummyimage.com/50x96/9c3c3c/000000.gif&amp;text=img23">
    <img src="http://dummyimage.com/50x35/7c6c6c/000000.gif&amp;text=img24">
    <img...

CSS

#gallery{
    position:relative;
    width:100%;
}
#gallery img{
    position:absolute;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    transition:all 1s;
    opacity:0;
}

JavaScript

var fixedwidth = 50 + 1, //the +1 is for 1px horizontal margin
    gallery = $('#gallery'), // cache a reference to our container
    imagelist = gallery.children(); // cache a reference to our image list


function layoutImages(){
    var columncount = parseInt(gallery.width()/fixedwidth,10),  // find how many columns fit in container
        columns = [];
    
    for (var i =0;i<columncount;i++){ // initialize columns (0 height for each)
        columns.push(0);
    }
    
    imagelist.each(function(i,image){
         var min = Math.min.apply(null, columns), // find height of shortest column
             index = columns.indexOf(min), // find column number with the min height
             x = index*fixedwidth; // calculate horizontal position of current image based on column it belongs
        
        columns[index] += image.height +1; //calculate new height of column (+1 for 1px vertical margin)
        $(image).css({left:x, top:min}).delay(i*200).animate({opacity:1},100); // assign new position to image and show it
    });
}

$(window).resize(layoutImages).trigger('resize');