JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

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

      <ul id="tiles">
      
      </ul>

      <div id="loader">
        <div id="loaderCircle"></div>
      </div>

    </div>

    <footer>

    </footer>
  </div>

CSS

#tiles {
list-style-type: none;
position: relative; 
margin: 0;
}

#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;
}

/** General page styling **/
  
html {
background-color: #e9e9e9;
}

#main {
padding: 30px 0 30px 0;
}

header h1 {
text-align: center;
font-size: 24px;
font-weight: normal;
margin: 30px 0 3px 0;
}

header p {
text-align: center;
font-size: 13px;
color: #777;
margin: 0;
}

/** Loader **/
  
#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);