转 js Infinite Scrolling Demo

浏览数：44 / 时间：2015年06月09日

原文：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 –

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

转 js Infinite Scrolling Demo