php+html+js+滚动加载,jQuery局部div滚动加载远程数据

之前我们介绍了浏览器滚动条远程加载数据http://www.sucaihuo.com/js/9.html，这次我们介绍PHP+mysql局部div鼠标滚轮远程加载数据

下载资源

下载积分：

110

积分

加载内容区域#lists

$(function() {

var totalpage = 6; //总页数，防止超过总页数继续滚动

var winH = $(window).height(); //页面可视区域高度

$("#lists").scroll(function() {

if (i < totalpage) { // 当滚动的页数小于总页数的时候，继续加载

var pageH = $(document.body).height();

var scrollT = $(window).scrollTop(); //滚动条top

var aa = (pageH - winH - scrollT) / winH;

if (aa < 0.01) {

getJson(i)

}

} else { //否则显示无数据

showEmpty();

}

});

getJson(0); //加载第一页

});

function getJson(page) {

var msg_list = $('#lists');

if (msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60) {

$(".nodata").show().html("");

$.getJSON("ajax.php", {page: i}, function(json) {

if (json) {

var str = "";

$.each(json, function(index, array) {

var str = "

";

var str = str + "

" + array['id'] + "、" + array['title'] + "

";

$("#lists").append(str);

});

$(".nodata").hide()

} else {

showEmpty();

}

});

i++;

}

}

function showEmpty() {

$(".nodata").show().html("别滚动了，已经到底了。。。");

}