转 js Infinite Scrolling Demo

<ul class="items">
   <li>content</li>
   <li>content</li>
   ...
</ul>
<div id="lastPostsLoader"></div>

<script type="text/javascript">
$(document).ready(function(){
    function lastAddedLiveFunc()
    {
        $(‘div#lastPostsLoader‘).html(‘<img src="bigLoader.gif"/>‘);
 
        $.get("loadmore.php", function(data){
            if (data != "") {
                //console.log(‘add data..‘);
                $(".items").append(data);
            }
            $(‘div#lastPostsLoader‘).empty();
        });
    };
 
    //lastAddedLiveFunc();
    $(window).scroll(function(){
 
        var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
        var  scrolltrigger = 0.95;
 
        if  ((wintop/(docheight-winheight)) > scrolltrigger) {
         //console.log(‘scroll bottom‘);
         lastAddedLiveFunc();
        }
    });
});
</script>

<ul id="images">
  <li><img src="img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
  <li><img src="img/stones.jpg" width="580" height="360" alt="Stones" /></li>
  <li><img src="img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
  <li><img src="img/pier.jpg" width="580" height="360" alt="Pier" /></li>
  <li><img src="img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
  <li><img src="img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
  <li><img src="img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
</ul>

<script type="text/javascript" src="js/jquery.endless-scroll.js"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
    $(document).endlessScroll({
      bottomPixels: 500,
      fireDelay: 10,
      callback: function(i) {
        var last_img = $("ul#images li:last");
        last_img.after(last_img.prev().prev().prev().prev().prev().prev().clone());
      }
    });
  });
</script>

var end = $("#BottomThing").offset().top; 
var viewEnd = $(window).scrollTop() + $(window).height();
var distance = end - viewEnd;
if (distance < 300) // do load –