#之前写的有图片懒加载，写的比较粗糙-_-，望见谅。这篇写的是上拉到底部加载更多内容，原理跟那个图片懒加载有类似，下面直接开始代码：
全部代码
如果页面没有滚动时显示出‘加载更多’，就自动加载更多；滚动到底部显示出‘加载更多’时，自动加载一次，然后再次滚动到底部显示出‘加载更多’之后停止加载，且‘加载更多‘变为‘没有更多’：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>上拉到底部加载更多</title>
</head>
<style>
*{margin: 0;padding: 0;}
img{width: 48%;;height: 150px;display: inline;border: 1px solid #ccc;}
#more p{text-align: center;}
</style>
<body>
<div id="div">
<div id="divImg">
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">
</div>
<div id="more">
<p>加载更多</p>
</div>
</div>
<script>
(function(){
var more = true;
//开始进入页面调用
function startLoad(){
//显示到#more所需高度
var moreHeight = document.getElementById('divImg').offsetHeight + 20;
var clientHeight = window.screen.availHeight;
//如果直接显示出了#more
if (moreHeight<clientHeight){
setTimeout(function(){
console.info('加载更多');
document.getElementById('divImg').innerHTML += `
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">`;
},1000);
//没有更多，可在ajax返回时判断有没有更多
//more = false;
}
}
startLoad();
window.onscroll = function(){
loadMore();
};
function loadMore(){
var moreHeight = document.getElementById('divImg').offsetHeight + 20;
var clientHeight = window.screen.availHeight;
var scrollHeight = document.body.scrollTop;
//判断是否上拉到显示#more
if (scrollHeight > moreHeight-clientHeight){
//判断是否还有更多
if (!more){
setTimeout(function() {
document.querySelector('#more p').innerHTML = '没有更多';
},500);
return false;
}
setTimeout(function(){
console.info('加载更多');
document.getElementById('divImg').innerHTML += `
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">
<img class="img" src="img/2.png" alt="">`;
},1000);
//没有更多，可在ajax返回时判断有没有更多
more = false;
}
}
})()
</script>
</body>
</html>