情況是當滑動條滑動到最底部的時候，數據顯示出一部分的更多
思路：獲取到瀏覽器屏幕的高度client，文檔的高度h和滑動距離頂部的距離scroll，當h<=client+scroll的時候就是滑動條到了底部的時候了，
判斷好什么時候到了底部的時候，調取ajax獲取到相對應的數據；
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0px;padding:0px;}
.content{width:500px;height:100%;border:1px solid red;margin:10px auto 0px;}
</style>
</head>
<body>
<div class="content"></div>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
//一開始顯示數據
//實際中應該是將分頁的效果做成加載更多的效果 但是調取數據的原理 是一樣的 就是顯示數據的效果不一樣
ajax();
$(document).scroll(function(){
//滾動條滑動的時候獲取滾動條距離頂部的距離
var scroll=$(document).scrollTop();
//屏幕的高度
var client=$(window).height();
var h=$(document).height();
var flag=true;
if (h<=scroll+client) { // 到達底部時,加載新內容
if(flag==false){
return;
}
ajax();
}
});
function ajax(){
$.ajax({
url:'https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=新聞',
type:'GET',
dataType:'jsonp',
success:function(data){
flag=false;
setTimeout(function(){//只是模擬一下需要有個時間過程表示正在調取數據
for(var i=0;i<data.result.length;i++){
var result=data.result[i];
var odiv='<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>'+
'<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>';
$(".content").append(odiv);
}
},500);
},
});
};
});
</script>
</body>
</html>
代碼地址：https://github.com/GainLoss/load-more
因為加載更多的效果其實作用和分頁是一樣的 分頁的地址：http://www.cnblogs.com/GainLoss/p/5810112.html