JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://new2.sb-studio.co.uk/wp-content/themes/sb2013/js/jquery.isotope.min.js"></script>
<div id="main-grid">
<div class="element-class" id="0">0</div>
<div class="element-class" id="1">1</div>
<div class="element-class" id="2">2</div>
<div class="element-class" id="3">3</div>
<div class="element-class" id="4">4</div>
<div class="element-class" id="5">5</div>
<div class="element-class" id="6">6</div>
<div class="element-class" id="7">7</div>
<div class="element-class" id="8">8</div>
<div class="element-class" id="9">9</div>
<div class="element-class" id="10">10</div>
<div class="element-class" id="11">11</div>
<div class="element-class" id="12">12</div>
<div class="element-class" id="13">13</div>
<div class="element-class" id="14">14</div>
<div class="element-class" id="15">15</div>
<div class="element-class" id="16">16</div>
<div class="element-class" id="17">17</div>
</div>

CSS

.element-class{
width:100px;
    height:300px;
    background-color:#999;
    margin:10px;
}

JavaScript

$(".element-class:gt(5)").css("display", "none");

var lastidnum = "6";
$(window).on('scroll', function() {
    var scrollTop = $(window).scrollTop(),
        elementOffset = $("#" + (lastidnum - 1)).offset().top,
        distance = (elementOffset - scrollTop);

    if (distance <= 100) {
        $("#" + lastidnum).fadeIn("slow");
        lastidnum++;
    }

});


$(document).ready(function(){
    
    var $container = $('#main-grid');

$container.isotope({
    itemSelector: '.element-class',
    animationEngine: 'best-available',
    masonry: {
    columnWidth: 4
    }
    });  
});