Pure CSS Masonry Layout [ Images ]

http://blog.kangrian.com/

HTML

<div class='masonry'>
    <img src="http://lorempixel.com/150/250/food/1" />
    <img src="http://lorempixel.com/150/150/food/2" />
    <img src="http://lorempixel.com/150/100/food/3" />
    <img src="http://lorempixel.com/150/100/food/4" />
    <img src="http://lorempixel.com/150/150/food/5" />
    <img src="http://lorempixel.com/150/200/food/6" />
    <img src="http://lorempixel.com/150/150/food/7" />
    <img src="http://lorempixel.com/150/250/food/8" />
</div>

CSS

/* (item margins = 5) */
.masonry {
    -webkit-column-width:150px;
    -moz-column-width:150px;
    column-width:150px;
    /* same with bottom margin for the items */
    -webkit-column-gap:5px;
    -moz-column-gap:5px;
    column-gap:5px;
}
.masonry img {
    display:block;
    /* expand! */
    width:100%;
    height:auto;
    background-color:silver;
    /* bottom margin */
    margin:0 0 5px 0;
}