JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<script src="http://isotope.metafizzy.co/js/jquery.infinitescroll.min.js"></script>
<div id="wrapper">
    <div class="item"><span>1</span></div>
    <div class="item"><span>1</span></div>
    <div class="item"><span>1</span></div>
    <div class="item"><span>1</span></div>
    <div class="item"><span>1</span></div>
    
</div>

<nav id="page_nav">
    <a id="next">Next</a>
</nav>

CSS

#wrapper{border:1px solid #ccc;}
#wrapper .item{border:1px solid #ccc;width:100px;heigth:22px;margin:5px}

JavaScript

/*Infinite Scroll 測試*/
var sn = 1;
$("#wrapper").infinitescroll(
    {
        navSelector  : '#page_nav',
        nextSelector : 'a#next',
        itemSelector : '#wrapper .item',
        localMode    : true,
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
          }
    },
    function(newElements) {
      alert(newElements);
        $(this).append($(newElements)); 
       
    }
);