JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<script src="http://divespotter.eu/js/jquery.wookmark.min.js"></script>
<div id="container">
    <div id="main" role="main">
        <ul id="tiles"></ul>
        <div id="loader">
            <div id="loaderCircle"></div>
        </div>
    </div>
</div>

CSS

#tiles {
    list-style-type: none;
    position: relative;
    margin: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#tiles li {
    width: 200px;
    background-color: #ffffff;
    border: 1px solid #dedede;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    display: none;
    cursor: pointer;
    padding: 4px;
}
#tiles li img {
    display: block;
}
#tiles li p {
    color: #666;
    font-size: 11px;
    line-height: 16px;
    margin: 6px 0 1px 7px;
}
html {
    background-color: #e9e9e9;
}
body {
    min-width:1000px;
}
#main {
    padding: 30px 0 30px 0;
}
#loader {
    height: 16px;
    text-align: center;
    padding: 25px 0 25px 0;
}
#loaderCircle {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    background-image:url(http://preloaders.net/preloaders/249/Sun%20loader.gif);
    background-repeat:no-repeat;
}

JavaScript

(function ($) {
    var handler = null,
        page = 1,
        isLoading = false,
        apiURL = 'http://www.wookmark.com/api/json/popular';

    var options = {
        autoResize: true,
        container: $('#tiles'),
        offset: 2,
        itemWidth: 210
    };


    function onScroll(event) {
        if (!isLoading) {
            var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
            if (closeToBottom) {
                loadData();
            }
        }
    };

    function applyLayout() {
        handler = $('#tiles li');
        handler.wookmark(options);
    };

    function loadData() {
        isLoading = true;
        $('#loaderCircle').show();

        $.ajax({
            url: apiURL,
            dataType: 'jsonp',
            data: {
                page: page
            },
            success: onLoadData
        });
    };

    function onLoadData(data) {
        isLoading = false;
        $('#loaderCircle').hide();
        page++;
        var html = '';
        var i = 0,
            length = data.length,
            image;
        for (; i < length; i++) {
            image = data[i];
            html += '<li>';

            html += '<img src="' + image.preview + '" width="200" height="' + Math.round(image.height / image.width * 200) + '">';

            html += '<p><a class="test" href="#">' + image.title + '</a></p>';

            html += '</li>';
        }

        $('#tiles').append(html);

        applyLayout();

        $('#tiles .test').on("click", function (e) {
            e.preventDefault();
            alert('test');
        });
    };

    $(document).bind('scroll', onScroll);
    loadData();


})(jQuery);