<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();
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-1.10.0.min.js
  2. https://unpkg.com/masonry-layout@3/dist/masonry.pkgd.js
  3. https://unpkg.com/imagesloaded@3/imagesloaded.pkgd.js