JSFiddle - React, Tailwind, and code Playground
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>
<div id="outer-wrap" style="position: absolute; width: 100%; height: 100%;">
<div id="inner-wrap" style="padding: 20px;">
<div id="main-grid">
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
<div class="grid-block" style="background-image: url(http://placekitten.com/200/300)"></div>
</div>
</div>
</div>
CSS
#main-grid {
position: absolute;
width: 100%;
}
.grid-block {
width: 24%; height: 50px;
margin-left: 0.25%; margin-right: 0.25%;
margin-bottom: 5px;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
JavaScript
var $container = $("#main-grid");
var size = function () {
$container.isotope({
masonry: {
columnWidth: $container.width() / 4
}
});
}
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: ".grid-block",
animationEngine: "jquery",
sortBy: "random",
resizable: false,
masonry: {
columnWidth: $container.width() / 4
}
});
size();
});
$(window).smartresize(size);