JSFiddle - React, Tailwind, and code Playground

by tenold

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 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 $container = $('.grid');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
    $container.masonry({
        columnWidth: 200,
        itemSelector: '.item',
        gutter: 10
    });
    $container.masonry('on', 'layoutComplete', function(){
        console.log('got here');
        $container.animate({'opacity':1});
    });
});