JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<script src="//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.110713/jquery.infinitescroll.min.js"></script>
<ul id="container">
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output from database</li>
    <li class="element">Output...

CSS

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
#infscr-loading {
    letter-spacing: 0;
    position: fixed;
    text-align: center;
    bottom: 30px;
    left: 42%;
    z-index: 100;
    background: white;
    background: hsla(0, 0%, 100%, 0.9);
    padding: 20px;
    color: #222;
    font-size: 15px;
    font-weight: bold;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

JavaScript

var $container = $('#container');
$container.isotope({
    itemSelector: '.element'
});
$container.infinitescroll({
    navSelector: '.pagination', // selector for the paged navigation 
    nextSelector: '.pagination li.pag-next a', // selector for the NEXT link (to page 2)
    itemSelector: '.element', // selector for all items you'll retrieve
    behavior: 'local',
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
    }
},
// call Isotope as a callback
function (newElements) {
    $container.isotope('appended', $(newElements));
});