JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/masonry/2.1.08/jquery.masonry.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.lazyload/1.8.4/jquery.lazyload.js"></script>

CSS

.clearfix:before, .clearfix:after {
 content: " "; display: table;
}
.clearfix:after {
 clear: both
}
.clearfix {
 *zoom: 1
}
html, body {
 min-height: 100% !important; height: 100%; padding: 0; margin: 2%;
}
.loader {
 background: url("../loader.gif") no-repeat center center
}
.container, .header {
 width: 100%; max-width: 1400px; margin: 0 auto; padding: 0;
}
.overlay {
 position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; background: rgba(255,255,255,.80) url("http://nr.x10.mx/plus.png") no-repeat center center; opacity: 0; height: 100%; -webkit-transition: all 0.8s cubic-bezier(0.23,1,0.32,1); -moz-transition: all 0.8s cubic-bezier(0.23,1,0.32,1); -o-transition: all 0.8s cubic-bezier(0.23,1,0.32,1); transition: all 0.8s cubic-bezier(0.23,1,0.32,1);
}
.overlay:hover {
 opacity: 1
}
.ms-item {
 padding-left: 5px !important; padding-right: 5px !important; margin-top: 10px;
}

.footer {
 height: 40px
}

#container.fluid .item {
    width:  200px; 
    margin: 3px 0.2% 3px 0.2%;
}
#container.fluid .item img
{
	display: block;
	width: 100%;
	height: auto !important;
	opacity:1;
}

JavaScript

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').addClass('not-loaded');
    $('.item img.not-loaded').lazyload({
        effect: 'fadeIn',
        load: function() {
            // Disable trigger on this image
            $(this).removeClass("not-loaded");
            $container.masonry('reload');
        }
    });
    $('.item img.not-loaded').trigger('scroll');
});