JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<div id="controls">
    <ul>
        <li><a id="asc" href="#">Sort Ascending</a></li>
        <li><a id="desc" href="#">Sort Descending</a></li>
        <li><a id="thin" href="#">Narrow Images</a></li>
        <li><a id="all" href="#">All Images</a></li>
    </ul>
</div>
<div id="container" class="isotope">
    <div class="item">
      <img  src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" />
    </div>
    <div class="item">
      <img  src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" alt="Officer" />
    </div>
    <div class="item">
      <img  src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" alt="Tony" />
    </div>
    <div class="item">      
    <img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" alt="Kendra" />
    </div>
    <div class="item">
      <img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" alt="Giraffe" />
    </div>
    <div class="item">
      <img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" alt="Gavin" />
    </div>
    <div class="item">
      <img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg"...

CSS

#controls ul li {
    float:left;
    margin-right:20px;
}

#container {
    clear:both;
}

/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.item { width: 33%; padding: 1px; }

img {width: 100%;}

JavaScript

jQuery(document).ready(function($) {
    var $win = $(window),
        $imgs = $("img");

    /* var $con = $('#container').isotope({
        onLayout: function() {
            $win.trigger("scroll");
        }
    }); */
    var $con = $('#container').imagesLoaded( function() {
      $con.isotope({
        itemSelector: '.item'
      });
      /* var $items = $con.find('.item');
            $con.isotope( 'revealItemElements', $items ); */
      setTimeout(function() {
      	$con.isotope({
            itemSelector : '.item'
        });
     }, 0);   
    });
    
    $(window).scroll(function(){
$con.isotope({
itemSelector : '.item'
});
});
    
    console.log('#asc');

    $imgs.lazyload({
        effect: "fadeIn",
        failure_limit: Math.max($imgs.length - 1, 0)
    });

    $('#asc').click(function(event) {
        $con.isotope({
            sortAscending: true
        });
    });

    $('#desc').click(function(event) {
        $con.isotope({
            sortAscending: false
        });
    });

    $('#thin').click(function(event) {
        $con.isotope({
            sortAscending: true,
            filter: 'img[width="333"]'
        });
    });

    $('#all').click(function(event) {
        $con.isotope({
            sortAscending: true,
            filter: ''
        });
    });
});