JSFiddle - React, Tailwind, and code Playground

by Snj

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.7/jquery.lazy.min.js"></script>
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.7/jquery.lazy.plugins.min.js"></script>
  <!-- Begin isotope items wrap 
  ============================== -->
  <div class="isotope-items-wrap">
    <div class="grid-sizer"></div>
    
    <div class="isotope-item man">
      <div class="box">
        <img class="box-image lazy" data-src="https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=crop&w=1350&q=80" alt="">
      </div>
    </div>

    <div class="isotope-item woman">
      <div class="box">
        <img class="box-image lazy" data-src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?auto=format&fit=crop&w=651&q=80" alt="">
      </div>
    </div>

    <div class="isotope-item child">
      <div class="box">
        <img class="box-image lazy" data-src="https://images.unsplash.com/photo-1460788150444-d9dc07fa9dba?auto=format&fit=crop&w=1350&q=80" alt="">
      </div>
    </div>

    <div class="isotope-item puppy">
      <div class="box">
        <img class="box-image lazy" data-src="https://images.unsplash.com/photo-1447684808650-354ae64db5b8?auto=format&fit=crop&w=1347&q=80" alt="">
      </div>
    </div>

    <div class="isotope-item man">
      <div class="box">
        <img class="box-image lazy" data-src="https://images.unsplash.com/photo-1505022610485-0249ba5b3675?auto=format&fit=crop&w=1350&q=80" alt="">
      </div>
    </div>

    <div class="isotope-item woman">
      <div class="box">
        <img class="box-image lazy" data-src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?auto=format&fit=crop&w=1950&q=80" alt="">
      </div>
    </div>

   ...

CSS

/* General 
================== */
html {
  overflow-Y: scroll;
}
img {
  max-width:100%;
  height: auto;
}


/* Isotope 
================== */
.isotope {
  overflow: hidden;
}
.grid-sizer {
  float: left;
}

/* Isotope filter 
================== */
.isotope-filter {
  /*padding: 20px 1.2%;*/
}

/* Isotope item 
=================== */
.isotope-item {
  width: 33.33333333%;
  box-sizing: border-box;
  /*padding: 1.2%;*/
}

/* Box 
================== */
.box {
  line-height: 0;
}
.box-image {
}

JavaScript

(function ($) {
	'use strict';

  // init Isotope
  var $container = $('.isotope-items-wrap');
  $container.imagesLoaded(function() {
    $container.isotope({
      itemSelector: '.isotope-item',
      transitionDuration: '0.7s',
      masonry: {
        columnWidth: '.grid-sizer',
        horizontalOrder: false
      }
    });
  });

  // Lazy loading
  $('.lazy').Lazy({
     effect: 'fadeIn',
     effectTime: 400,
     visibleOnly: true,
     threshold: 0,
     onError: function(element) {
			console.log('error loading ' + element.data('src'));
		},
    afterLoad: function(element) {
      // called after an element was successfully handled
      $container.isotope('layout');
    }
  });
  
})(jQuery);