masonry

by lovromar

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<div class="container">
    <div class="masonry">
    <div class="post-box col-lg-4 col-md-4 col-sm-4"> <a href="/posts/1"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" /></a>

    </div>
    <div class="post-box col-lg-4 col-md-4 col-sm-4"> <a href="/posts/2"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" /></a>

    </div>
    <div class="post-box col-lg-4 col-md-4 col-sm-4"> <a href="/posts/3"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" /></a>

    </div>
    <div class="post-box col-lg-4 col-md-4 col-sm-4"> <a href="/posts/4"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" /></a>

    </div>
    <div class="post-box col-lg-4 col-md-4 col-sm-4"> <a href="/posts/5"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" /></a>

    </div>
    </div>
</div>

CSS

.img-thumbnail {
    padding: 10px;
}
.post-box {
    margin: 15px 0 15px 0;
}

JavaScript

$(document).ready(function () {
    var $container = $('.masonry');

    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.post-box',
            columnWidth: '.post-box',
            transitionDuration: 0
        });
    });
});