js實現瀑布流載入圖片效果

     今天學習了一個瀑布流載入效果，很多網站都有瀑布流效果，瀑布流就是很多產品顯示在網頁上，寬相同，高度不同，表現為多欄佈局，隨著頁面滾動條向下滾動，這種佈局還會不斷載入數據塊並附加至當前尾部。原理是：1.設定一行中的列數；2.取第一行中每一個div的高度並把每一個高度放進一個數組中；3.算出數組中最小高度的index值；4.把第二行的第一個div放到最小高度的div的下方並把重新算出的高度值放進數組中，重新計算最小高度的index值；5.以此類推實現多欄佈局的瀑布流效果；6.如果最後一張div的高度已滾動出現在底部時創建新的div添加到最後一張的後面，不斷迴圈以達到載入效果；接下來代碼實現。

<div id="main">
		<div class="box">
			<div class="Pic">
				<img src="images/0.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/1.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/2.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/3.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/4.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/5.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/6.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/7.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/8.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/9.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/10.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/11.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/12.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/13.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/14.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/15.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/16.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/17.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/18.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/19.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/20.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/21.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="Pic">
				<img src="images/22.jpg" alt="" />
			</div>
		</div>
	</div>

       *{padding: 0;margin: 0;}
	#main{
		width: 1000px;
		margin: 0 auto;
		position: relative;
	}
	.box{
		display: inline-block;
		float: left;
		padding: 10px 0 0 10px;
	}
	.Pic{
		border: 1px #ccc solid;
		padding: 10px;
		border-radius: 8px;
	}
	.Pic img{
		width: 162px;
	}

js代碼：

<script>
	window.onload=function(){
		waterFall('main','box');
		var dataInt={
			"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]
		};
        
        /*滾動條滾動時觸發的事件*/
		window.onscroll=function(){
			if(checkIsSlide()){  //結果返回是true則執行
				var omain=document.getElementById('main');
				/*添加div到頁面上*/
				for(var l=0;l<dataInt.data.length;l++){  
					var box=document.createElement('div');
					box.className="box";
					omain.appendChild(box);
					var pic=document.createElement('div');
					pic.className='Pic';
					box.appendChild(pic);
					var oimg=document.createElement('img');
					oimg.src="images/"+dataInt.data[l].src;
					pic.appendChild(oimg);
				}
				waterFall('main','box');  //新添加的div都要重新執行waterFall方法，以實現瀑布流效果
			}
		}
	}
    /*實現瀑布流效果，多欄佈局*/
	function waterFall(parent,pid){   //傳兩個參數，父元素parent和子元素pid
		var oparent=document.getElementById(parent);   //獲取父元素
		var opid=getClass(oparent,pid);   //獲取父元素下的classname為pid的所有子元素
		var cols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth);  //父元素寬度/一個子元素的寬度，即一行的列數
		var arrH=[];   //存放每一列的高度的數組
		for(var j=0;j<opid.length;j++){
			if(j<cols){   
				arrH.push(opid[j].offsetHeight);//把第一行的高度都放進數組中
			}else{   //第二行開始
				var minH=Math.min.apply(null,arrH);   //計算arrH的最小值
				var Index=getHIndex(arrH,minH);  //使用getHIndex方法獲取最小值的index值
				/*把之後的div放到最小值div的下方*/
				opid[j].style.position='absolute';  
				opid[j].style.top=minH+'px';
				opid[j].style.left=opid[0].offsetWidth*Index+'px';
				arrH[Index]+=opid[j].offsetHeight; //數組中的最小值加上已放在下方的div的高度值並重新迴圈
			}
		}
		
	}

    /*獲取父元素下的classname為cls的所有元素*/
	function getClass(parent,cls){
		var obj=parent.getElementsByTagName('*');
		var Clsarr=[];
		for(var i=0;i<obj.length;i++){
			if(obj[i].className==cls){
				Clsarr.push(obj[i]);
			}
		}
		return Clsarr;
	}
    /*獲取arr數組中的最小值minH的Index值*/
	function getHIndex(arr,minH){
		for(var k=0;k<arr.length;k++){
			if(arr[k]==minH){
				return k;
			}
		}
	}
    /*判斷當前滾動的高度時候大於最後的div出現在底部的高度值,即是否要載入*/
	function checkIsSlide(){
		var omain=document.getElementById('main');
		var obox=getClass(omain,'box');
		var lastTop=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);
		var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
		var documentH=document.documentElement.clientHeight;
		return (lastTop)<(scrollTop+documentH)?true:false;
	}
</script>

效果圖如下：

推薦網址：http://www.imooc.com/learn/101   詳細講解瀑布流佈局的教學視頻