html如何滚动加载数据,Ajax滚动加载数据

Ajax滚动加载数据，主要思路：

1.进入页面时执行onLoad方法开始加载数据

2.屏幕下拉时判断底部距离是否小于滚动距离+窗体高度，如果小于则重新加载数据

****案例:****

Ajax滚动加载数据

* {

margin: 0;

padding: 0;

list-style: none;

font-size: 14px;

}

/*

box

*/

.box {

width: 795px;

margin: 0 auto;

}

/*

ul

*/

.list ul {

width: 100%;

overflow: hidden;

}

/*

item

*/

.list ul li {

width: 180px;

height: 200px;

margin-left: 15px;

margin-bottom: 15px;

float: left;

background-color: #ccc;

text-align: center;

line-height: 200px;

cursor: pointer;

}

/*

item鼠标经过

*/

.list ul li:hover {

background-color: #e1e1e1;

}

/*

加载更多

*/

#loading {

height: 50px;

width: 765px;

line-height: 50px;

text-align: center;

cursor: pointer;

margin: 0 auto;

}

/*

加载更多经过

*/

#loading:hover {

background-color: #cecece;

}

$(function(){

//请求数据接口

var url="./json.json";

//渲染数据集合dom

var list=$("#list");

//加载更多dom

var loadingBtn=$("#loading");

//是否需要加载

var isLoad =true;

//当前查询第几页

var currentPage = 1;

//没有更多数据

var nomore_Text = '没有更多数据';

/*

请求数据接口

*/

function loadData(){

//发送ajax

$.ajax({

//url

url: url,

//请求方式

type:'POST',

//参数

data: {currentPage:currentPage},

//成功回调

success: sucessCallback,

//失败回调

error: function(e, e2, e3){

//

alert('请求失败，原因：'+e3);

}

});

}

/*

成功回调函数

*/

function sucessCallback(data){

//当前页自增

currentPage++;

//

var html = '',result = data.list, len = result.length,i = 0;

//循环数据

for(; i

var rs = result[i], title = rs.title,id=rs.id,desc = rs.desc;

html+='

'+title+'';

}

//渲染数据

list.append(html);

//接口是否查询完毕

if(data.pageCount == data.pageNo || currentPage > data.pageCount){

//数据全部加载完毕

isLoad = false;

//

loadingBtn.html(nomore_Text);

}

}

/*

判断是否要加载接口

*/

function isScrollLoad(){

//加载更多距离

var btn_top = loadingBtn.offset().top;

//窗体高度

var window_height = $(window).height();

//滚动距离

var scroll_Top = $(window).scrollTop();

//加载更多高度

var loading_height = loadingBtn.height();

//是否需要加载(底部距离是否小于窗口高度+滚动的距离)

return btn_top < scroll_Top + window_height - (loading_height - 5) ? true : false;

}

/*

滚动事件监听

*/

$(window).scroll(function(){

//是否滚动到底部

var _needload = isScrollLoad();

//

if(_needload && isLoad){

//加载数据

loadData();

}

});

/*

页面加载完毕执行一次查询

*/

window.onload = function(){

//加载数据

loadData();

};

/*

点击加载更多

*/

loadingBtn.click(function(){

//是否加载数据

if(isLoad)

loadData();

});

});

点击加载更多

****JSON数据：****

{

"pageNo": 1,

"pageCount": 3,

"list": [

{

"id": "1",

"title": "测试数据1",

"desc": "描述数据1"

}

, {

"id": "2",

"title": "测试数据2",

"desc": "描述数据2"

}

, {

"id": "3",

"title": "测试数据3",

"desc": "描述数据3"

}

, {

"id": "4",

"title": "测试数据4",

"desc": "描述数据4"

}

, {

"id": "5",

"title": "测试数据5",

"desc": "描述数据5"

}

, {

"id": "6",

"title": "测试数据6",

"desc": "描述数据6"

}

, {

"id": "7",

"title": "测试数据7",

"desc": "描述数据7"

}

, {

"id": "8",

"title": "测试数据8",

"desc": "描述数据8"

}

, {

"id": "9",

"title": "测试数据9",

"desc": "描述数据9"

}, {

"id": "10",

"title": "测试数据10",

"desc": "描述数据10"

}

]

}

****效果：****

Paste_Image.png