JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<div data-role="header" data-position="fixed" data-theme="b">
     <h1>Photos (<span id="photoCount">0</span>)</h1>

</div>
<ul id="list-lazyloader" data-role="listview" data-theme="d"></ul>

CSS

img {
    height: 100%;
    width: 100%;
}

JavaScript

var per_page = 20; //max images per page
var page = 1; //initialize page number
$(document).ready(function () {
    loadFlckr(20, 1); //load some images onload
});

//Handler for scrolling toward end of document
$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        //End of page, load next content here
        if (!loading) loadNextPage();
    }
});

//Load content for next page
function loadNextPage() {
    loadFlckr(per_page, ++page);
}

//Load images from Datasource (Flickr in this case)
function loadFlckr(per_page, page) {
    loading = true; //interlock to prevent multiple calls
    $.mobile.loading('show');
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

    //Calling to service provider
    $.getJSON(flickerAPI, {
        per_page: per_page || 20,
        page: page || 1,
        tags: "mount rainier",
        tagmode: "any",
        format: "json"
    })
        .done(function (data) {
        $.each(data.items, function (i, item) {
            var url = String.format("http://farm{0}.staticflickr.com/{1}/{2}_{3}_{4}.jpg", item.farm, item.server, item.id, item.secret, 't');
            var img = $("<img/>").attr("src", url);
            var li = $("<li/>").append(img);
            var title = $("<h2/>").append(item.title || 'No Title');
            var desc = $("<p/>").append(item.owner);
            li.append(title);
            li.append(desc);
            //Append new list item to listview
            li.appendTo("#list-lazyloader");
        });
        //refresh listview
        $('#list-lazyloader').listview('refresh');
        loading = false;
        $.mobile.loading('hide');
        //Update page index
        page = data.photos.page;
        //Update photos count
        $('#photoCount').text($('#list-lazyloader li').size());
    });
};

//C#-like feature to concat strings
String.format = function () {
    var s = arguments[0];
   ...