JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<!DOCTYPE html><title>Infinite Shitty Watercolour!</title><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><h2>Never-ending <a href="http://www.reddit.com/user/Shitty_Watercolour">/u/Shitty_Watercolour</a> paintings in exactly one <a href="http://onekb.net/">one kilobyte.</a></h2><div></div>

CSS

body {
    text-align: center;
}
img {
    width: 100%;
    border: 1px solid darkgrey;
    border-bottom:0;
}
div {
    width: 750px;
    margin:0 auto;
}

JavaScript

// Load a page of images
var lastFullname;
var lastLoadDone = true;
var appendImages = function() {
    lastLoadDone = false;
    var gotImage = false;
    var url = "//www.reddit.com/user/Shitty_Watercolour/comments.json?after=" + lastFullname
    $.getJSON(url, function(data) {
        var comments = data.data.children;
        for (index in comments) {
            var data = comments[index].data;
            var image = data.body.match(/(\/\/i.imgur.com\/(.*))(\?.*)?/);
            lastFullname = data.name
            if (image) {
                $("div").append('<img src="' + image[0] + '">');
                gotImage = true;
            } else if (index == 24 && !gotImage) {
                appendImages()
            }
        };
        lastLoadDone = true;
    });
};

// Load the first page on startup
appendImages();

// Load more images when we get near the bottom of the page
var loadMore = function() {    
    var $window = $(window);
    if($window.scrollTop() + $window.height() > $(document).height() - 200 && lastLoadDone) {
        $window.unbind("scroll");
        appendImages();
        $window.bind("scroll", loadMore);
    }
}
$(window).scroll(loadMore);