<div id="container">
  <div class="item"><img src="https://lorempixel.com/220/194" /></div>
  <div class="item"><img src="https://lorempixel.com/220/160" /></div>
  <div class="item"><img src="https://lorempixel.com/220/220" /></div>
  <div class="item w2"><img src="https://lorempixel.com/440/270" /></div>
  <div class="item"><img src="https://lorempixel.com/220/280" /></div>
  <div class="item"><img src="https://lorempixel.com/220/270" /></div>
  <div class="item"><img src="https://lorempixel.com/220/120" /></div>
  <div class="item w2"><img src="https://lorempixel.com/440/230" /></div>
  <div class="item"><img src="https://lorempixel.com/220/180" /></div>
  <div class="item"><img src="https://lorempixel.com/220/360" /></div>
  <div class="item"><img src="https://lorempixel.com/220/294" /></div>
  <div class="item"><img src="https://lorempixel.com/220/260" /></div>
  <div class="item"><img src="https://lorempixel.com/220/270" /></div>
  <div class="item"><img src="https://lorempixel.com/220/360" /></div>
  <div class="item"><img src="https://lorempixel.com/220/120" /></div>
  <div class="item w2"><img src="https://lorempixel.com/440/230" /></div>
  <div class="item"><img src="https://lorempixel.com/220/180" /></div>
  <div class="item"><img src="https://lorempixel.com/220/360" /></div>
  <div class="item"><img src="https://lorempixel.com/220/294" /></div>
  <div class="item"><img src="https://lorempixel.com/220/260" /></div>
</div>

html {
  overflow-y: scroll;
}

#container {
  background: #EEE;
}

.item {
  width: 25%;
  float: left
}

.item.w2 { width: 50%; }

.item img {
  display: block;
  width: 100%;
}

$( function() {

  // initialize Masonry
  var $container = $('#container').masonry();
  // layout Masonry again after all images have loaded
  $container.imagesLoaded( function() {
    $container.masonry();
  });
  
});