JS(jQuery)实现文章列表拖动到页面底部,自动加载新的文章列表

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

最近需要写一个能够让文章列表拖动到页面底部,自动加载新文章的列表页面。

其实这种功能在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);

});

}

});