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="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.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">hiddenTab</button></div>
<div id="container" class="container tabTranUp">
<div class="grid-sizer"></div></div>
<div id="loadingBlock" class="loadingBlock"><div id="loading" class="loading"><span></span><span></span><span></span><span></span><span></span></div></div>

CSS

html, body {
    display: flex;
    color: #b2b2b2 !important;
    background-color: #282827 !important;
    flex-flow: column;
	  padding: 0;
    margin: 0;
    height: 100%;
    padding-bottom: 0px !important;
    overflow-x: hidden;
}
.inbubble.icon.snatched {
  position: absolute;
  margin-left: 5px;
  margin-top: 3px;
  top: 0;
  left: 0;
}
.inbubble.icon.download {
  position: absolute;
  margin-right: 5px;
  margin-top: 3px;
  top: 0;
  right: 0;
  display: block !important;
  cursor: pointer !important;
}
#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:20px; 	/* define height so you can define for content */
    z-index:200;	/* high z index so other content scrolls underneath */
    background: grey;
    padding-bottom: 23px;
}
.headerBlock {
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 25px !important;
    opacity: 1;
    width: 100%;
    height: 20px !important;
    z-index: 149;
    background: linear-gradient(to bottom, rgba(23, 23, 23, 0.94), rgba(251, 251, 251, 0) 100%);
}
#container {
  height: 100%;
}
.tabTransUp {
    z-index: 100;
    will-change: transform, opacity;
    animation: tabTransUp 0.6s;
    animation-fill-mode: both;
    transform-origin: top center;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-animation: tabTransUp 0.6s;
    -webkit-animation-fill-mode: both;
    -webkit-transform-origin: top center;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translate3d(0,0,0);
    transform:...

JavaScript

var qsRegex;
$(document).on('click', '.inbubble.icon.download', function (event) {
   alert($(this).find("a").attr("href"))
   return false;
});
$('#more').click(function(){
  var container = $('.container');

  container.isotope({
    itemSelector: '.isotope-item',
    transformsEnabled: true,
    hiddenStyle: {
      opacity: 0,
      transform: 'scale(0.001)'
    },
    visibleStyle: {
      opacity: 1
    },
    percentPosition: true,
    transitionDuration: 400,
    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"><a id="aboveimgsrc" class="fancybox" data-fancybox="gallery" href="https://wecision.com/images/wrc-1.png" data-caption="">'
  vineta += '<img id="imgtorrentURL" src="https://wecision.com/images/wrc-1.png" data-torrenturl="https://www.sdfsdf.sx/torrents.php?id="/></a>'
  vineta += '<div class="bubble">'
  vineta += '<i class="fitted check icon  snatched inbubble" title="Snatched torrent"></i>'
  vineta += '<i class="fitted download icon  inbubble" title="Download torrent file"><a href=" "></a></i>'
  vineta += '<div class="item-title"><a href="">ITEM<br>2020-20-20 • 850Mb • [5|5|5]</a></div>'
  vineta += '<div class="ui fitted divider"></div>'
  vineta += '<div class="item-content">'
  vineta += '<div class="item-body">'
  vineta += '<a class="torrentURL" href="https://www.sdfsd.com/page.php?id=" target="_blank">img asd dfgjkdkldfj llj lfdkj  dsklfjsdlkfj dslk</a>'
  vineta += '<div class="ui fitted divider"></div>'
  vineta += '<div class="screen-title"><a href="">[Screens]</a></div>'
  vineta += '<div class="screen-content">'
  vineta += '<div class="screen-body">'
  vineta += '</div>'
  vineta += '</div>'
  vineta += '</div>'
  vineta +=...