手动下拉刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one {
width: 90%;
height: 60px;
margin: 0 auto;
background-color: pink;
margin-bottom: 10px;
}
.two {
width: 90%;
height: 60px;
margin: 0 auto;
background-color: purple;
margin-bottom: 10px;
}
#content {
display: none;
}
#addMore {
width: 90%;
height: 60px;
font-size: 30px;
line-height: 60px;
text-align: center;
color: white;
margin: 0 auto;
display: block;
background-color: #ccc;
border-radius: 10px;
border: 1px solid #333;
outline: none;
position: absolute;
}
</style>
</head>
<body style="position: relative;">
<!-- 懒加载: 需要的时候才加载 -->
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<button id="addMore">加载更多</button>
< img src="loading.gif" id="waitImg" style="display: none;" alt="">
<div id="content">
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
