滑動加載
項目中有用到加載更多的功能，本來想做滑動加載的，但是一直沒有研究出來，總是會多次觸發，剛剛還故意去想當時怎麽想的，怎麽會出現那樣的情況，可惜，沒有寫出來，現在把正確的解題思路總結下：
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{
width: 200px;
margin: 0 auto;
min-height: 300px;
}
li{
width: 100%;
height: 50px;
margin-bottom: 10px;
background: blanchedalmond;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var range=50;//距下邊界的高度
var num=14;
var totalheight=0;
var app=document.getElementById(‘app‘);
var totalheight = 0;
var ul=document.getElementsByTagName("ul")[0];
var sign=10;
window.onscroll=function(){
var scrollTop=document.body.scrollTop;
var clientHeight = app.clientHeight;//app的真實高度，包括隱藏在內的
var Height = document.documentElement.clientHeight;//當前窗口的高度
totalheight = parseFloat(Height) + parseFloat(scrollTop);
if( scrollTop > sign ){
console.log("向下"+ scrollTop)
}
if( scrollTop < sign ){
console.log("向上"+ scrollTop)
}
if( clientHeight - range < totalheight){
ul.innerHTML+="<li>"+num+"</li>";
num++;
}
}
}
</script>
</body>
</html>
上例中，還對scroll滑動的方向做了判斷，只是提供方法，拓展一下。
滑動加載