转 js Infinite Scrolling Demo

原文：http://www.sitepoint.com/jquery-infinite-scrolling-demos/

Infinite Scrolling Demo 5

Usage – HTML

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

Usage – jQuery

<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>

Infinite Scrolling Demo 3

This demo loads in images on infinite scroll and never reaches the end. It uses the jquery.endless-scroll plugin which can be customised to trigger load for x number of pixels from the bottom of the screen. The demo clones the same images and inserts them at the end of the list and so on. Obviously the script can be customised to load more images from different sources quite easily

Usage – HTML

<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>

Usage – jQuery

<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 –