來源：http://itssh.cn/post/933.html
Ajax滾動加載數(shù)據(jù)谷醉，主要思路：
1.進(jìn)入頁面時執(zhí)行onLoad方法開始加載數(shù)據(jù)
2.屏幕下拉時判斷底部距離是否小于滾動距離+窗體高度米酬，如果小于則重新加載數(shù)據(jù)
****案例:****
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Ajax滾動加載數(shù)據(jù)</title>
<!--
@author:sm
@email:sm0210@qq.com
@desc:Ajax滾動加載數(shù)據(jù)
-->
<style type="text/css">
* {
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鼠標(biāo)經(jīng)過
*/
.list ul li:hover {
background-color: #e1e1e1;
}
/*
加載更多
*/
#loading {
height: 50px;
width: 765px;
line-height: 50px;
text-align: center;
cursor: pointer;
margin: 0 auto;
}
/*
加載更多經(jīng)過
*/
#loading:hover {
background-color: #cecece;
}
</style>
<!-- 引入jquery -->
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<!-- -->
<script type="text/javascript">
$(function(){
//請求數(shù)據(jù)接口
var url="./json.json";
//渲染數(shù)據(jù)集合dom
var list=$("#list");
//加載更多dom
var loadingBtn=$("#loading");
//是否需要加載
var isLoad =true;
//當(dāng)前查詢第幾頁
var currentPage = 1;
//沒有更多數(shù)據(jù)
var nomore_Text = '沒有更多數(shù)據(jù)';
/*
請求數(shù)據(jù)接口
*/
function loadData(){
//發(fā)送ajax
$.ajax({
//url
url: url,
//請求方式
type:'POST',
//參數(shù)
data: {currentPage:currentPage},
//成功回調(diào)
success: sucessCallback,
//失敗回調(diào)
error: function(e, e2, e3){
//
alert('請求失敗，原因：'+e3);
}
});
}
/*
成功回調(diào)函數(shù)
*/
function sucessCallback(data){
//當(dāng)前頁自增
currentPage++;
//
var html = '',result = data.list, len = result.length,i = 0;
//循環(huán)數(shù)據(jù)
for(; i<len;i++){
var rs = result[i], title = rs.title,id=rs.id,desc = rs.desc;
html+='<li data-id="'+id+'" title="'+desc+'">'+title+'</li>';
}
//渲染數(shù)據(jù)
list.append(html);
//接口是否查詢完畢
if(data.pageCount == data.pageNo || currentPage > data.pageCount){
//數(shù)據(jù)全部加載完畢
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;
}
/*
滾動事件監(jiān)聽
*/
$(window).scroll(function(){
//是否滾動到底部
var _needload = isScrollLoad();
//
if(_needload && isLoad){
//加載數(shù)據(jù)
loadData();
}
});
/*
頁面加載完畢執(zhí)行一次查詢
*/
window.onload = function(){
//加載數(shù)據(jù)
loadData();
};
/*
點擊加載更多
*/
loadingBtn.click(function(){
//是否加載數(shù)據(jù)
if(isLoad)
loadData();
});
});
</script>
</head>
<body>
<div class="box">
<!-- list -->
<div class="list">
<ul id="list"></ul>
</div>
<!-- 加載更多 -->
<div id="loading">點擊加載更多</div>
</div>
</body>
</html>
****JSON數(shù)據(jù)：****
{
"pageNo": 1,
"pageCount": 3,
"list": [
{
"id": "1",
"title": "測試數(shù)據(jù)1",
"desc": "描述數(shù)據(jù)1"
}
, {
"id": "2",
"title": "測試數(shù)據(jù)2",
"desc": "描述數(shù)據(jù)2"
}
, {
"id": "3",
"title": "測試數(shù)據(jù)3",
"desc": "描述數(shù)據(jù)3"
}
, {
"id": "4",
"title": "測試數(shù)據(jù)4",
"desc": "描述數(shù)據(jù)4"
}
, {
"id": "5",
"title": "測試數(shù)據(jù)5",
"desc": "描述數(shù)據(jù)5"
}
, {
"id": "6",
"title": "測試數(shù)據(jù)6",
"desc": "描述數(shù)據(jù)6"
}
, {
"id": "7",
"title": "測試數(shù)據(jù)7",
"desc": "描述數(shù)據(jù)7"
}
, {
"id": "8",
"title": "測試數(shù)據(jù)8",
"desc": "描述數(shù)據(jù)8"
}
, {
"id": "9",
"title": "測試數(shù)據(jù)9",
"desc": "描述數(shù)據(jù)9"
}, {
"id": "10",
"title": "測試數(shù)據(jù)10",
"desc": "描述數(shù)據(jù)10"
}
]
}
****效果：****
Paste_Image.png
