JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<div id="grid" class="grid">
    <div class="item"><img src="http://fpoimg.com/200x200"/></div>
    <div class="item"><img src="http://fpoimg.com/200x200"/></div>
    <div class="item"><img src="http://fpoimg.com/200x200"/></div>
    <div class="item"><img src="http://fpoimg.com/200x200"/></div>
    <div class="item"><img src="http://fpoimg.com/200x200"/></div>
</div>

CSS

.grid {
    opacity: 0;
    width:600px;
}

.item {
    width:200px;
    float:left;
    margin-bottom:10px;
}

.item img {
    display: block;
}

JavaScript

var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
      columnWidth: 200,
      itemSelector: '.item',
      gutter: 10
  });
  console.log('got here');
  $('.grid').animate({'opacity':1});
});