列表頁面加載更多數(shù)據(jù)的實(shí)現(xiàn)辦法如下，根據(jù)個(gè)別情況，還需要考慮加載次數(shù)過多的邏輯處理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動(dòng)加載更多</title>
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}
body {
width: 100%;
background-color: #ccc;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border: 1px solid gold;
}
.load_div {
width: 400px;
height: 300px;
border: 1px solid red;
}
.load_div2 {
width: 400px;
height: 300px;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
<div class="load_div"></div>
</body>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var totalHeight = $(document).height(); //整個(gè)文檔高度
var seeHeight = $(window).height(); //瀏覽器可視窗口高度
var scrollTop = $(window).scrollTop(); //瀏覽器可視窗口頂端距離網(wǎng)頁頂端的高度
//添加滾動(dòng)事件
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
totalHeight = $(document).height();
console.log(scrollTop, seeHeight, totalHeight)
//滾動(dòng)條+可視高度+50，距離文檔高度差50的時(shí)候就要加載數(shù)據(jù)了
if(scrollTop + seeHeight + 50 > totalHeight) {
var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>';
$('body').append(htmlText);
}
})
</script>
</html>
加載過于頻繁的問題，可以參考另一篇文章事件節(jié)流來解決。
