JS(jQuery)实现文章列表拖动到页面底部,自动加载新的文章列表
最近需要写一个能够让文章列表拖动到页面底部,自动加载新文章的列表页面。
其实这种功能在QQ空间之类的网站中早已有体现。
下面自己写了个ajax实现该功能。
该代码使用了jQuery框架,请大家自行下载。
代码如下:
$(document).ready(function(){
var num = 1; //计数器初始化为1
var maxnum = 100; //设置一共要加载几次
$(window).scroll(function(){
checkload();
});
//建立加载判断函数
function checkload(){
var srollPos = $(window).scrollTop(); //滚动条距离顶部的高度
var windowHeight = $(window).height(); //窗口的高度
var dbHiht = $("body").height(); //整个页面文件的高度
s= setTimeout(function(){
if((windowHeight + srollPos) >= (dbHiht) && num != maxnum){
LoadList(14);
num++; //计数器+1
}
},500);
}
//创建ajax加载函数,并设置变量C,用于输入调用的页面频道,请根据实际情况判断使用,非必要。
function LoadList(c){
$.get("http://www.frontopen.com/xxx.php?chanel="+ c +"&start="+ num * 15 +"&num=15", function(result){
t = setTimeout(function(){$("#list_box").append(result)},1);
});
}
});
var num = 1; //计数器初始化为1
var maxnum = 100; //设置一共要加载几次
$(window).scroll(function(){
checkload();
});
//建立加载判断函数
function checkload(){
var srollPos = $(window).scrollTop(); //滚动条距离顶部的高度
var windowHeight = $(window).height(); //窗口的高度
var dbHiht = $("body").height(); //整个页面文件的高度
s= setTimeout(function(){
if((windowHeight + srollPos) >= (dbHiht) && num != maxnum){
LoadList(14);
num++; //计数器+1
}
},500);
}
//创建ajax加载函数,并设置变量C,用于输入调用的页面频道,请根据实际情况判断使用,非必要。
function LoadList(c){
$.get("http://www.frontopen.com/xxx.php?chanel="+ c +"&start="+ num * 15 +"&num=15", function(result){
t = setTimeout(function(){$("#list_box").append(result)},1);
});
}
});