核心内容
$(window).scroll(function () {
//获取滚动条高度
var scrollTop = parseInt($(window).scrollTop());
//获取窗口高度
var viewH = $(window).height();
//获取内容高度
var contentH = $(document).height();
if(scrollTop + viewH > contentH - 100 && flag == true){
$(".rading").css("display","block");
indexPage++;
flag = !flag;
getDateSource();
setTimeout(function termer() {
flag = !flag;
}, 3000)
}
})
核心解析
var scrollTop = parseInt($(window).scrollTop()); | 获取滚动条高度 |
ar viewH = $(window).height(); | 获取窗口高度 |
var contentH = $(document).height(); | 获取内容高度 |
if(scrollTop + viewH > contentH - 100 && flag == true) | 如果滚动条的高度加窗口的高度大于(内容高度-100)就表示到底部了;其中(内容-100)表示距离底部100px的时候就开始加载 |
不多说了,先上干货
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding: 0px;text-decoration: none;}
li{
width: 100%;
list-style: none;
height: 100px;
margin: 5px 0px;
padding: 5px 0;
border: 1px solid #CCCCCC;
background: #CCCCCC;
}
#tupian{
display: inline-block;
width: 20%;
height: 90px;
fixed:3;
margin: 5px auto;
padding-left: 10px;
}
li #tupian img{
width: 90px;
height: 90px;
border-radius: 20%;
}
li .right-content{
display: inline-block;
width: 60%;
height: 95px;
margin: 2.5px auto;
float: right;
}
li .right-content p{
text-indent: 2em;
margin: 8px auto;
}
li .right-content p span{
text-decoration: line-through;
color: red;
font-size: 12px;
}
.rading{
width: 100px;
height: auto;
margin: 10px auto;
display: none;
}
.rading img{
width: 100px;
}
</style>
</head>
<body>
<ul id="list">
<div class="rading">
<img src="img/timg.gif" />
</div>
</ul>
<script src="src/js/jquery-2.1.4.min.js"></script>
<script>
var storearr = new Array();
var indexPage = 1;
var size = 10;
var flag = true;
$(function(){
$(".rading").css("display","block");
getDateSource()
function getDateSource(){
storearr.splice(0,storearr.length);
console.log("============>"+storearr.length)
console.log("============>"+indexPage)
$.ajax({
url: "后台请求数据接口地址",
type: "post",
dataType: "json",
async: true,
data: {
currentPage: indexPage,
size:size
},
success: function (jsonResult) {
console.log(jsonResult.data)
$.each(jsonResult.data, function (index, value) {
var arr = new Array();
for (var x in value) {
arr.push(value[x]);
}
storearr.push(arr);
})
CreateTable();
}
});
}
function CreateTable(){
$(".rading").css("display","none");
var li = "";
for (var i = 0; i < storearr.length; i++) {
li +="<li>"
li +="<div id='tupian'>";
li +="<img src="+storearr[i][2]+"'>";
li +="</div>";
li +="<div class='right-content'>";
li +="<p>"+storearr[i][0]+"</p>";
li +="<p>¥"+"<span>"+storearr[i][12]+"</span></p>";
li +="<p>¥"+"<span>"+storearr[i][13]+"</span></p>";
li +="</div>";
li +="</li>";
}
$("#list").append(li);
$(".rading").css("display","none");
}
$(window).scroll(function () {
//获取滚动条高度
var scrollTop = parseInt($(window).scrollTop());
//获取窗口高度
var viewH = $(window).height();
//获取内容高度
var contentH = $(document).height();
if(scrollTop + viewH > contentH - 100 && flag == true){
$(".rading").css("display","block");
indexPage++;
flag = !flag;
getDateSource();
setTimeout(function termer() {
flag = !flag;
}, 3000)
}
})
});
</script>
</body>
</html>
结果