瀑布流佈局

瀑布流佈局

　　在淘寶，蘑菇街等網站上咱們常常能夠看到瀑布流佈局，而瀑布流佈局的始祖即是www.pinterest.com,以下所示：

　　瀑布流，又稱瀑布流式佈局。是比較流行的一種網站頁面佈局，視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部。最先採用此佈局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站網站爲這類風格。

　　實現這種佈局實際上並不困難，這裏不講解和後臺交互的部分。

　　html代碼以下：

	<div id="waterfull">
			<div class="box">
				<div class="box_image"><img src="waterfull_images/1.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/2.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/3.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/4.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/5.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/6.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/7.gif" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/8.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/9.jpg" alt=""></div>
			</div>
			<div class="box">
				<div class="box_image"><img src="waterfull_images/10.jpg" alt=""></div>
			</div>

		</div>

　　這裏，我放了10張圖片，固然能夠根據須要放置任意多張的圖片。最外層id爲waterfull的div是用於包裹整個瀑布流佈局的。而class爲box的div是用於分隔開每一張圖片的。class爲box_image的div是用於在css中描述與修飾圖片的。

　

　　　下面是css部分的代碼:

#waterfull{width: 1200px;height: auto;position: relative;}
.box{float:left; padding: 5px;}
.box_image{padding:5px;border:1px solid #ccc; border-radius: 5px; box-shadow: 5px 5px 8px #ccc}
#waterfull img{width: 278px;height: auto;}

　　其中waterfull的寬度最好是給定的，高度咱們能夠經過放置圖片的高度來把它撐開。至於position:relative，是爲了用於每一張圖片的絕對定位時以waterfull爲定位的基準。緊接着，咱們讓圖片浮動起來，這樣就能夠從左到右，從上到下的排列了。對於緊鄰圖片的div，咱們能夠設置一個邊框，經過box-shadow作出陰影的效果。而img的寬度設置是十分必要的，能夠看出Pinterest中就是這樣。

 

　　下面是javascript代碼：

window.onload=function(){
images_location("waterfull","box");

function images_location(Parent,Children){
	var parent=document.getElementById(Parent);//獲取id爲waterfull的元素
	var children=getChildElement(parent,Children);//經過一個封裝函數來獲取上述獲取到的元素的全部符合條件的子元素，得到一個數組
	var imageWidth=children[0].offsetWidth;//由於在css中已經設定了固定寬度，因此只須要第一張圖片的寬度。
	var cols=Math.floor(1250/imageWidth);獲取在固定寬度的狀況下能夠放下的列數。固然這裏能夠不用固定寬度，而使用用戶瀏覽器的寬度document.documentElement.clientWidth。
	var hArr=[];
	for(var i=0;i<children.length;i++){
		if(i<cols){
			hArr.push(children[i].offsetHeight);//將第一列中的圖片高度數據存到hArr數組中
		}else{
			var minH=Math.min.apply(null,hArr);//又有Math.min方法的參數必須是一個一個的數，故這裏使用apply方法傳入數組求得最小的高度
			var index=getMinhIndex(hArr,minH);//封裝一個函數得到最小高度的圖片所在列的索引
			children[i].style.position="absolute";//使用絕對定位
			children[i].style.top=minH+"px";//注意：這裏必定要有px這個單位，不然將會出錯
			children[i].style.left=imageWidth*index+"px";//即left的值
			hArr[index]+=children[i].offsetHeight;//將剛添加的那一列的offsetHeight值更新
		}

	}

}
function getChildElement(Parent,Children){
	var childrenArr=[];
	var allChildren=Parent.getElementsByTagName("*");
	for(var i=0;i<allChildren.length;i++){
		if(allChildren[i].className==Children){//注意：原生JavaScript中對於元素由className這個屬性，即獲取類名。
			childrenArr.push(allChildren[i]);
		}
	}
	return childrenArr;
}
function getMinhIndex(arr,val){
	for(var i in arr){ //遍歷arr數組中的每個元素，其中i表示各元素的索引
		if(arr[i]==val){
			return i;
		}
	}
}
}

　　

　　好了，瀑布流就大功告成了，是否是很簡單呢。下面看看最終的效果圖：