【无限滚动加载数据】—infinite-scroll插件的使用

网上对于infinite-scroll插件使用的例子不多。但由于它的出现，鼓吹了瀑布流形式的页面展示方式，所以不得不了解了解这种新的分页方式。

官网上有对infinite-scroll的详细描述，但一般人即使看未必看得懂，看得懂未必就调试成功。所以借今晚有点时间，把跑通的例子供大家借鉴。

一.无限滚动概念

首先，它是基于Jquery的，另外还要明白无限滚动的概念：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形式文件。

二.探讨infinite-scroll

1.从网页头引入两个js文件，注意必须先放jquery的

2.之后在网页头自己写一个js脚本

3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>








 


    
            
    	
         
		第一页内容第一页内容

		第一页内容
第一页内容
第一页内容

		第一页内容
第一页内容
第一页内容

		第一页内容
第一页内容
第一页内容
		
    
        
         
                
    

三.细微部分

1.js函数里还可定义的其他属性:

  debug        : true,                                         //用于调试，如果需要用到，只需在网页头引入官网demo里的debug.js文件                
  loadingImg   : "/img/loading.gif",                   //加载时候显示的进度条，用户可以自定义     
  loadingText  : "Loading new posts...",            //加载时显示的文字   
  extraScrollPx: 50,                                            //离网页底部多少像素时触发ajax
  donetext     : "I think we've hit the end, Jim" ,     //加载完数据(到达底部时)显示的文字提醒
  errorCallback: function(){},                             //加载完数据后的回调函数，可选              

   其他属性暂不作过多介绍

2.数据的载入方式

①html  ：如果你已经有固定的数据块，可以放到html里面加载静态页面。

②json  ：可以用后台返回json的方式，返回的时候要指定temple里面的html模版，否则会出错。

③我上面例子用的其实也是json，前台在Action层把数据取出后再用StringBuilder拼装成html格式的字符串返回前台。（个人习惯）

3.数据分页方式

本例用hibernate进行数据分页。

以上内容仅作参考，时间问题暂且收笔。

这里给出一个demo下载，不是这个例子但是原理是一样的，希望有帮助。