jQuery实现滚动到底部时自动加载更多的方法示例
jq滚动到底部加载更多方法
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>滑动</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
body {
position: sticky;
}
* {
margin: 0;
padding: 0;
list-style-type: none;
font-family: "微软雅黑";
}
.list ul li {
width: 96%;
margin-left: 2%;
border: 1px solid #ccc;
border-radius: 8px;
height: 200px;
margin: 25px 2%;
text-align: center;
line-height: 200px;
font-size: 18px;
-moz-box-shadow:1px 5px 9px #B8B6B6;
-webkit-box-shadow:1px 5px 9px #B8B6B6;
box-shadow:1px 5px 9px #B8B6B6;
}
#loading {
font-family: "微软雅黑";
text-align: center;
font-size: 13px;
color: #666;
line-height: 30px;
margin-bottom: 10px;
display: none;
}
#loading img {
height: 30px;
vertical-align: -30%;
opacity: 0.8;
}
#loading img {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 2s linear infinite;
-moz-animation: rotate 2s linear infinite;
-o-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(-360deg)
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg)
}
to {
-moz-transform: rotate(-359deg)
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(0deg)
}
to {
-o-transform: rotate(-359deg)
}
}
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(-359deg)
}
}
</style>
<body>
<div class="list">
<ul>
</ul>
<p id="loading"><img src="img/loading.png" />正在加载.......</p>
</div>
</body>
<script>
$(function() {
var t = "0";
var list = "";
for(var i = 0; i < 5; i++) {
t++;
list += '<li>' + t + '</li>'
}
$(".list ul").html(list);
window.addEventListener('scroll', function() {
if(window.pageYOffset + window.innerHeight >= document.documentElement.scrollHeight) {
$("#loading").show();
if(t >= 15) {
$("#loading").text("我是有底线的")
} else {
setTimeout(function() {
loading();
}, 1000);
}
}
});
function loading() {
var listtwo = "";
for(var i = 0; i < 1; i++) {
t++;
listtwo += '<li>' + t + '</li>'
}
$(".list ul").append(listtwo);
}
});
</script>
</html>
注意：记得引用jquery.js文件
