JSFiddle - React, Tailwind, and code Playground

Isotope ImageLoaded (old way)

by Snj

HTML

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.min.js"></script>
<div id="headmenu"><button id="more">append more items</button><input id="quickSearch" class="mini quickSearch" placeholder="Filter by tags..." type="text"><button id="remove">remove hiddenTab class</button></div>
<div id="container" class="container">
<div id="loadingBlock" class="loadingBlock"></div><div id="loading" class="loading"><span></span><span></span><span></span><span></span><span></span></div>
<div class="grid-sizer"></div>
</div>

CSS

html, body {
    display: flex;
    color: #b2b2b2 !important;
    flex-flow: column;
	  padding: 0;
    margin: 0;
    height: 100%;
    padding-bottom: 0px !important;
    overflow-x: hidden;
}
#headmenu {
    position:fixed; /* fixing the position takes it out of html flow */
    left:0;			/* top left corner should start at leftmost spot */
    top:0;			/* top left corner should start at topmost spot */
    width:100%;		/* take up the full browser width */
    height:25px; 	/* define height so you can define for content */
    z-index:200;	/* high z index so other content scrolls underneath */
    background: grey;
}

/* =========== Isotope =========== */
.isotope {
  overflow: hidden;
}
.grid-sizer {
  float: left;
}
.isotope-item {
  opacity: 0;
  width: 33.33333333%;
  position: relative;
  box-sizing: border-box;
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
  /*padding: 1.2%;*/
}
.isotope-item img {
  width: 100% !important;
  height: auto !important;
  vertical-align: top;
}
.loadingBlock {
    pointer-events: none;
    z-index: 100;
    position: fixed;
	  height: 15%;
    width: 100%;
    left: 0px;
    bottom: -10px !important;
    background: -webkit-linear-gradient(to top, rgb(24, 24, 24) 0%, rgba(251, 251, 251, 0) 50%);
    background: -moz-linear-gradient(to top, rgb(24, 24, 24) 0%, rgba(251, 251, 251, 0) 50%);
    background: -o-linear-gradient(to top, rgb(24, 24, 24) 0%, rgba(251, 251, 251, 0) 50%);
    background: linear-gradient(to top, rgb(24, 24, 24) 0%, rgba(251, 251, 251, 0) 60%);
}

.loading {
    pointer-events: none;
    z-index: 150;
    display: flex;
    position: fixed;
    text-align: center;
    width: 100%;
    left: 0;
    bottom: -23px !important;
	  margin-left: -5px;
    margin-right: -5px;
}
.loading span {
    -webkit-animation: loading 1s infinite alternate;
    background: #181818;
    border-radius: 10px;
    display: inline-block;
    height: 10px;
   ...

JavaScript

/*$('#remove').click(function() {
$('.container').removeClass('flipped');
});*/


$(document).ready(function(){
  $('#more').click(function(){
    var qsRegex;
    var container = $('.container');
    container.isotope({
      itemSelector: '.isotope-item',
      transformsEnabled: true,
      percentPosition: true,
      transitionDuration: 0, // Laggy when many items.
      resizable: false,
      masonry: {
      columnWidth: '.grid-sizer',
      horizontalOrder: false
      },
      filter: function() {
        //var $this = $('.isotope-item');
        var searchResult = qsRegex ? $(this).text().match(qsRegex) : true;
        return searchResult;
      }
    });


    var elems = $();
    var vineta = '';
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/003.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/005.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/0074158.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/01_-_Cover.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/02_-_Front8f752.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/033017VF_FootWorshipGIF4.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/03ba18b.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/091817VF_StraponGIF1080ap.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/100665.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/100671.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/100672.jpg" />'
    vineta += '<div class="isotope-item animated"><img src="http://127.0.0.1/100spanks_1469549547000.jpg" />'
    vineta += '<div class="isotope-item animated"><img...