首页>>Jquery文字>>滚动到底部自动加载更多内容，滚动条可以继续滚动(2014-10-14)

滚动到底部自动加载更多内容，滚动条可以继续滚动

滚动到底部自动加载更多内容，滚动条可以继续滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. 'use strict';  
  2.   
  3. var InfiniteList = (function () {  
  4.   var pub = {};  
  5.   
  6.   var offset = 0;  
  7.   var limit = 15; /* enough elements to activate the scrollbar*/  
  8.   var serviceEndpoint = null;  
  9.   var displayFunction = null;  
  10.   
  11.   /* simulate a webservice */  
  12.   function getFakeData(offset, limit, callback) {  
  13.     var data = [];  
  14.     var i;  
  15.     var id;  
  16.     for (i = 0; i < limit; i++) {  
  17.       id = offset + i;  
  18.       data.push({  
  19.         id: id,  
  20.         name: "Name " + id,  
  21.         description: "Description " + id  
  22.       });  
  23.     }  
  24.     setTimeout(function () {  
  25.       callback(null, data);  
  26.     }, 1000); /* simulate 1s delay for the service call */  
  27.   }  
  28.   
  29.   /* real Http service */  
  30.   function getRealData(offset, limit, callback, serviceEndpoint) {  
  31.     var err = {};  
  32.     $.ajax({  
  33.       'url' : serviceEndpoint,  
  34.       'type' : 'GET',  
  35.       'data' : {  
  36.         'offset' : offset,  
  37.         'limit' : limit  
  38.       },  
  39.       'success' : function (data) {  
  40.         callback(null, data);  
  41.       },  
  42.       'error' : function (data, status, error) {  
  43.         err.push(status);  
  44.         err.push(error);  
  45.         callback(err, data);  
  46.       }  
  47.     });  
  48.   }  
  49.   
  50.   /* loop over the data and display it inside the page*/  
  51.   function display(err, datas) {  
  52.     if (err) {  
  53.       console.log('Something went wrong', err);  
  54.     } else {  
  55.       $.each(datas, function (i, data) {  
  56.         $.each(data, function (key, val) {  
  57.           $('#infinite-list').append('<span>' + key + ': ' + val + '</span><br>');  
  58.         });  
  59.         $('#infinite-list').append('<hr>');  
  60.       });  
  61.     }  
  62.   }  
  63.   
  64.   function loadData(o, l) {  
  65.     if (arguments.length !== 2) {  
  66.       console.log('Usage: InfiniteList.loadData(offset, length)');  
  67.     } else {  
  68.       if (serviceEndpoint === 'local') {  
  69.         getFakeData(o, l, displayFunction);  
  70.       } else {  
  71.         getRealData(o, l, displayFunction, serviceEndpoint);  
  72.       }  
  73.     }  
  74.   }  
  75.   
  76.   /* setDisplay()*/  
  77.   function setDisplay(d) {  
  78.     if (d === null || d === undefined) {  
  79.       displayFunction = display;  
  80.     } else {  
  81.       displayFunction = d;  
  82.     }  
  83.   }  
  84.   
  85.   /* setService */  
  86.   function setService(s) {  
  87.     if (s === null || s === undefined) {  
  88.       serviceEndpoint = 'local';  
  89.     } else {  
  90.       serviceEndpoint = s;  
  91.     }  
  92.   }  
  93.   
  94.   /* when scrolling to the bottom start loading the new stuff */  
  95.   $(document).ready(function () {  
  96.     $("#infinite-list").scroll(function () {  
  97.       var infiniteList = $('#infinite-list');  
  98.       if (infiniteList.scrollTop() + infiniteList.innerHeight() >= infiniteList.prop('scrollHeight')) {  
  99.         offset += limit;  
  100.         loadData(offset, limit);  
  101.       }  
  102.     });  
  103.   });  
  104.   
  105.   /* define public methods for the module */  
  106.   pub.setDisplay = setDisplay;  
  107.   pub.setService = setService;  
  108.   pub.loadData = loadData;  
  109.   
  110.   return pub;  
  111. }());  
XML/HTML Code
  1. <div id="infinite-list"></div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_444.html