<div class="images">
  <img src="http://lorempixel.com/150/143/?d=1480332819027" width="150" height="143" />
  <img src="http://lorempixel.com/150/165/?d=1480332819027" width="150" height="165" />
  <img src="http://lorempixel.com/150/124/?d=1480332819027" width="150" height="124" />
  <img src="http://lorempixel.com/150/185/?d=1480332819027" width="150" height="185" />
  <img src="http://lorempixel.com/150/155/?d=1480332819027" width="150" height="155" />
  <img src="http://lorempixel.com/150/148/?d=1480332819027" width="150" height="148" />
  <img src="http://lorempixel.com/150/161/?d=1480332819028" width="150" height="161" />
  <img src="http://lorempixel.com/150/180/?d=1480332819028" width="150" height="180" />
  <img src="http://lorempixel.com/150/150/?d=1480332819028" width="150" height="150" />
  <img src="http://lorempixel.com/150/131/?d=1480332819028" width="150" height="131" />
  <img src="http://lorempixel.com/150/108/?d=1480332819028" width="150" height="108" />
  <img src="http://lorempixel.com/150/161/?d=1480332819028" width="150" height="161" />
  <img src="http://lorempixel.com/150/151/?d=1480332819028" width="150" height="151" />
  <img src="http://lorempixel.com/150/158/?d=1480332819028" width="150" height="158" />
  <img src="http://lorempixel.com/150/177/?d=1480332819028" width="150" height="177" />
</div>
img {
  margin-bottom: 0.5em;
}
var images = document.querySelector('.images');
new Masonry(images, {
  itemSelector: 'img',
  columnWidth: 150,
  gutter: 10
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js