JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
<div class="images"></div>
<button>Load More Images</button>
<div class="debug"></div>

CSS

body {
    position: relative;
}
button {
    position: fixed;
    bottom: 50px;
    right: 0;
    font-size: 20px;
    padding: 10px;
}
.debug {
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px;
    background-color: blue;
    color: white;
}
.images .image {
    display: inline-block;
    background: red;
    min-height: 200px;
    min-width: 200px;
    padding: 0;
    margin: 0;
}

JavaScript

var pk = 'http://placekitten.com/{W}/{H}';
var $i = $('.images');
var $b = $('button');
var $d = $('.debug');
var imgs = 0;
var imgsLoaded = 0;

function loadImages() {
    imgs += 10;
    
    var $r = $('<div class="images-row"></div>');
    for(var i = 0; i < 10; i += 1) {
        $r.append('<div class="image"><img src="' + pk.replace('{W}', r()).replace('{H}', r()) + '"></div>');
    }
    $r.imagesLoaded(function() {
        imgsLoaded += 10;
        $('body').scrollTop($('body').outerHeight());
    });
    $i.append($r);
    $('body').scrollTop($('body').outerHeight());
}

function r() {
    return Math.ceil(Math.random() * 600) + 200;
}

$b.on('click', loadImages);

loadImages();

setInterval(function() {
    $d.text('Loaded ' + imgsLoaded + ' of ' + imgs + ' images');
}, 250);