滑动加载
项目中有用到加载更多的功能，本来想做滑动加载的，但是一直没有研究出来，总是会多次触发，刚刚还故意去想当时怎么想的，怎么会出现那样的情况，可惜，没有写出来，现在把正确的解题思路总结下：
1.滑动加载首先触发的scroll事件，scroll事件，那么肯定就有一个scrollTop；
var scrollTop=document.body.scrollTop,得到随时滑动的scrollTop;
2、得到窗口高度：window.innerHeight
document.body.clientHeight;//容器的真实高度（包括隐藏起来的）
定义变量var range=50;为距离底部多高，触发加载
再定义一个变量 var totalHeight = scrollTop + window.innerHeight;
if(document.body.clientHeight - 50 < totalHeight) {
loadMore();// 触发加载函数
}
var num=0；
function loadMore() {
var news = document.getElementById('news');
news.innerHTML+=" <li class='news__item'>"+ num +"、hello world</li>"
num++;
}
so,理解之后一点也不难，这个看上去还有点麻烦，其实也可以合并起来，用的时候，只要用的窗口，应该就没有问题；
下面，贴下我的另一个例子的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#app{
200px;
margin: 0 auto;
min-height: 300px;
}
li{
100%;
height: 50px;
margin-bottom: 10px;
background: blanchedalmond;
}
</style>
</head>
<body>
<div ;
num++;
}
}
}
</script>
</body>
</html>
上例中，还对scroll滑动的方向做了判断，只是提供方法，拓展一下。