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();
		}
	}
 

效果如下