滚动加载完整代码

做留言本时用到了滚动加载。

首先在页面中定义存放留言内容的DIV。

<div id="leavewordList" style="width:900px;margin-top:30px;margin-bottom:20px;margin-left:auto;margin-right:auto;line-height:25px;">
			<div style="width:100%;font-size:14px;line-height:25px;height:25px;font-weight:bold;">
				<div style="width:60%;text-align: center;float:left;">留言内容</div>
				<div style="width:20%;text-align: center;float:left;">留言时间</div>
				<div style="width:20%;text-align: center;float:left;">操作</div>
			</div>
		</div>

然后定义滚动加载的代码（利用了JQuery)：

var startIndex = 0;
	var limitNum = 16;
	$(function(){
		
		appendLeaveword(startIndex,limitNum);
		
		//监听窗口滚动事件
		$(window).scroll(function(){
			
			var windowHeight = $(window).height();
			var pageHeight = $(document.body).height();
			var scrollTop = $(window).scrollTop();
			
			var ration = (pageHeight-windowHeight-scrollTop)/windowHeight;
			if(ration<0.02){
				
				appendLeaveword(startIndex,limitNum);
			}
		});
	})
	
	function appendLeaveword(start,limit){
		
		//首先读取16条信息
		$.post("../src/bll/VoteService.php?method=getLeaveword",
			{
				start:start,
				limit:limit
			},function(dat){
			
				if(dat!=""&&dat!="]"){
					
					var arr = eval(dat);
					
					for(var i=0;i<arr.length;i++){
						
						var str = "<div style=\"width:100%;font-size:12px;line-height:25px;height:25px;\">"
									+"<div style=\"width:60%;text-align:left;float:left;\">"+(arr[i][1].length>100?(substring(arr[i][1],0,100)+"..."):arr[i][1])+"</div>"
									+"<div style=\"width:20%;text-align: center;float:left;\">"+arr[i][2]+"</div>"
									+"<div style=\"width:20%;text-align: center;float:left;\"><a href=\"javascript:deleteLeaveword("+arr[i][0]+")\" οnfοcus=\"this.blur()\"\">删除</a></div>";
						$("#leavewordList").append(str);
					}
					
					startIndex += 16;
				}
		});
	}
	
	function deleteLeaveword(id){
		
		alert(id);
	}