1、首先我们要获取浏览器可视区域页面的的高度
var winH = $(window).height(); //页面可视区域高度
2、然后,当滚动页面需要做的事情是:计算页面总高度(当滚动到底部时,页面加载新数据,所以页面总高度是动态变化的),计算滚动条位置(位置也是动态变化的),然后构造一个公式,计算相对比例
$(window).scroll(function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滚动条top var aa = (pageH-winH-scrollT)/winH;
3、当滚动条接近页面底部时,触发ajax加载,想服务器端请求数据)};
4、解析返回的json数据到网页中
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
if(json){
varstr = "";
$.each(json,function(index,array){
varstr = "<div class=\"single_item\"><divclass=\"element_head\">";
varstr += "<divclass=\"date\">"+array['date']+"</div>";
varstr += "<divclass=\"author\">"+array['author']+"</div>";
varstr += "</div><divclass=\"content\">"+array['content']+"</div></div>";
$("#container").append(str);
});
i++;
}else{
$(".nodata").show().html("别滚动了,已经到底了。。。");
return false;
}
});
}
});