<head><!--[if lt IE 10]><script src="http://blog.gabrielsaldana.org/wp-content/uploads/2012/02/css3-multi-column.js"></script><![endif]--></head>
<body>
    <img width="300" height="220" src="http://farm9.staticflickr.com/8436/7787073628_5fff9a70d1_n.jpg" alt="Yahoo! Hack 2012 India" />
    <img width="300" height="202" src="http://farm9.staticflickr.com/8431/7787083378_933c87b6fd_n.jpg" alt="Reid Burke Node.js Presentation" />
    <img width="300" height="300" src="http://farm9.staticflickr.com/8360/8332274557_25fc9df0d9_n.jpg" alt="Good Read on a Lazy Afternoon" />                
    <img width="300" height="225" src="http://farm9.staticflickr.com/8448/7787081028_39feaf1405_n.jpg" alt="Pictrendz Winners" />
    <img width="300" height="300" height="202" src="http://farm9.staticflickr.com/8075/8321349902_e89372006b_n.jpg" alt="Afternoon Workspace" />
    <img width="300" height="225" src="http://farm5.staticflickr.com/4148/5083309354_cb2dc8c911_n.jpg" alt="Durga Puja" />
    <img width="300" height="225" src="http://farm4.staticflickr.com/3482/3948152628_66ea9d4856_n.jpg" alt="Frog" />
    <img width="300" height="202" src="http://farm8.staticflickr.com/7117/7787080134_2cd4f6dcf8_n.jpg" alt="Winning Moments" />
    <img width="300" height="225" src="http://farm3.staticflickr.com/2774/4019603631_890528fd86_n.jpg" alt="Diyas" />
</body>
body {
    width: 900px;
    column-count: 3;
    column-gap: 20px;
}

img {    
    display: inline-block;
    width: 300px;
    margin-bottom: 7px;
}
/* 

This demo of --> http://www.code-pal.com/css3-based-masonry-layout-with-jquery-masonry-as-fallback/ 
Combined w/ tip from --> http://pterkildsen.com/2012/12/08/css3-columns-in-internet-explorer-7-8-and-9/
To use a JavaScript fallback for IE --> http://blog.gabrielsaldana.org/css3-columns-in-internet-explorer-and-other-unsupported-browsers/

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js