JS原生瀑布流
阿新 • • 發佈:2018-11-20
JS原生瀑布流(適合學習案例)
瀑布流:通俗講就是滑鼠下滑時,圖片或者其他塊像瀑布一樣源源不斷的顯現。
html程式碼結構
<div id="fall">
<ul></ul>
<ul></ul>
<ul></ul>
<ul class="change"></ul>
</div>
css程式碼
*{padding: 0;margin:0;list-style: none;} #fall{width: 1200px;margin:0 auto;} #fall ul{margin-right: 10px;width: 290px;float: left;} #fall ul li{margin-top: 10px;border-radius: 5px;} .change{margin:0;}
js程式碼
//獲取瀑布流盒子及ul var oDiv = document.getElementById('fall'); var aUl = oDiv.getElementsByTagName('ul'); //封裝隨機數 function rnd(n,m){ return parseInt(Math.random()*(m-n)+n); } //封裝動態建立LI function creatLi(){ var oLi = document.createElement('li'); oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')'; oLi.style.height = rnd(150,350)+'px'; return oLi; } function create20Li(){ for(var i = 0;i<20;i++){ var oLi = creatLi(); //建立陣列 var arr = []; //將ul放到陣列中進行排序 for(var j = 0;j<aUl.length;j++){ arr[j] = aUl[j]; } arr.sort(function(ul1,ul2){ return ul1.offsetHeight - ul2.offsetHeight; }) arr[0].appendChild(oLi); } } create20Li(); window.onscroll = window.resize = function(){ var scrollT = document.documentElement.scrollTop ||document.body.scrollTop; var clientH = document.documentElement.clientHeight ||document.body.clientHeight; // 如果滾動高度和視口高度之和大於瀑布流盒子高度一直新增li if (oDiv.offsetHeight<scrollT+clientH-50) { create20Li(); } }
效果如下