JSFiddle - React, Tailwind, and code Playground

HTML

<div class="masonry" ng-app="app" ng-controller="ExampleCtrl as ctrl">
  <div class="brick" ng-repeat="brick in ctrl.bricks">
    <img ng-src="{{brick}}" alt="">
  </div>
</div>

SCSS

.masonry {
  -moz-column-count:3;
  column-count:3;
  -moz-column-gap:1em;
  column-gap:1em;
  
  .brick {
    position:relative;
    margin-bottom:1em;
    
    img {
      width:100%;
    }
  }
}

JavaScript

angular.module('app', []).controller('ExampleCtrl', function () {
	this.getRandomSpan = function(min, max){
    return Math.floor(Math.random()*(max-min+1)+min);
  };
  
	this.bricks = [];
  
  for(var i = 0; i < 10; i++) {
  	this.bricks.push('http://placehold.it/'+this.getRandomSpan(100,200)+'x'+this.getRandomSpan(100,200));
  }
  
	return this;
});