Masonry Demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
<h1>Masonry - imagesLoaded progress</h1>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
    <img src="http://i.imgur.com/bwy74ok.jpg" />
  </div>
  <div class="grid-item">
    <img src="http://i.imgur.com/bAZWoqx.jpg" />
  </div>
  <div class="grid-item">
    <img src="http://i.imgur.com/PgmEBSB.jpg" />
  </div>
  <div class="grid-item">
    <img src="http://i.imgur.com/aboaFoB.jpg" />
  </div>
  <div class="grid-item">
    <img src="http://i.imgur.com/LkmcILl.jpg" />
  </div>
  <div class="grid-item">test
    <img src="http://i.imgur.com/q9zO6tw.jpg" />
  </div>
  <div class="grid-item">
    <img src="http://i.imgur.com/r8p3Xgq.jpg" />
  </div>
  <div class="grid-item">
    <img src="http://i.imgur.com/hODreXI.jpg" />
  </div>
  <div class="grid-item">
    <img src="http://i.imgur.com/UORFJ3w.jpg" />
  </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* force scrollbar */
 html {
    overflow-y: scroll;
}
body {
    font-family: sans-serif;
}
/* ---- isotope ---- */
 .grid {
    background: #DDD;
}
/* clear fix */
 .grid:after {
    content:'';
    display: block;
    clear: both;
}
/* ---- .grid-item ---- */
 .grid-sizer, .grid-item {
    width: 33.333%;
}
.grid-item {
    float: left;
}
.grid-item img {
    display: block;
    max-width: 100%;
}

JavaScript

// external js: masonry.pkgd.js, imagesloaded.pkgd.js
$(document).ready(function () {
    // init Masonry
    var $grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        percentPosition: true,
        columnWidth: '.grid-sizer'
    });
    // layout Isotope after each image loads
    $grid.imagesLoaded().progress(function () {
        $grid.masonry();
    });

});