JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<script src="http://github.com/desandro/imagesloaded/raw/master/jquery.imagesloaded.min.js"></script>
<script src="https://raw.github.com/desandro/isotope/master/jquery.isotope.min.js"></script>
<ul>
    <li><img src="http://lorempixel.com/500/300/" /></li>
    <li><img src="http://lorempixel.com/500/300/" /></li>
    <li><img src="http://lorempixel.com/500/400/" /></li>
    <li><img src="http://lorempixel.com/500/400/" /></li>
    <li><img src="http://lorempixel.com/500/100/" /></li>
    <li><img src="http://lorempixel.com/500/100/" /></li>
    <li><img src="http://lorempixel.com/500/700/" /></li>
    <li><img src="http://lorempixel.com/500/700/" /></li>
    <li><img src="http://lorempixel.com/500/300/" /></li>
    <li><img src="http://lorempixel.com/500/300/" /></li>
    <li><img src="http://lorempixel.com/500/200/" /></li>
    <li><img src="http://lorempixel.com/500/400/" /></li>
    <li><img src="http://lorempixel.com/500/100/" /></li>
    <li><img src="http://lorempixel.com/500/500/" /></li>
    <li><img src="http://lorempixel.com/500/800/" /></li>
    <li><img src="http://lorempixel.com/500/600/" /></li>
</ul>

CSS

ul { list-style-type: none; }
ul li { width: 33.2%; }
ul li img { width: 100.5%; display: block; }

JavaScript

var $container = $("ul");

$container.imagesLoaded(function() {
  $container.isotope({
    itemSelector: "li",
    animationEngine: "jquery",
    sortBy: "random",
    resizable: false,
    masonry: { columnWidth: $container.width() / 3 }
  });
});

$(window).smartresize(function() {
  $container.isotope({
    masonry: { columnWidth: $container.width() / 3 }
  });
});