瀑布流，又稱瀑布流式布局啡氢。是比較流行的一種網站頁面布局状囱，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動倘是，這種布局還會不斷加載數(shù)據(jù)塊并附加至當前尾部亭枷。最早采用此布局的網站是Pinterest，逐漸在國內流行開來搀崭。國內大多數(shù)清新站基本為這類風格叨粘，像花瓣網、蘑菇街瘤睹、美麗說等升敲。
瀑布流布局，有三種方法可以實現(xiàn)轰传，分別是javascript驴党、jquery和css3。
瀑布流實現(xiàn)方式比較：
Javascript原生方式/jquery方式
1获茬、需要計算港庄，列數(shù) = 瀏覽器窗口寬度/圖片寬度，圖片定位是根據(jù)每一列的高度計算下來圖片的位置恕曲；2鹏氧、圖片排序是按照圖片計算的位置橫向排列，位置是計算出來的佩谣，比較規(guī)范把还。
Css方式
1、不需要計算，瀏覽器自動計算笨篷，只需設置列寬瞳秽，性能高；2率翅、列寬隨著瀏覽器窗口大小進行改變练俐，用戶體驗不好；3冕臭、圖片排序按照垂直順序排列腺晾，打亂圖片顯示順序；4辜贵、圖片加載還是依靠javascript/jquery實現(xiàn)悯蝉。
現(xiàn)在介紹的只是javascript方法實現(xiàn)：
<html>部分代碼：
<!Doctype>
<html>
<head>
<title>瀑布流布局</title>
<meta= charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/16.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/17.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/18.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/19.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/21.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/22.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/23.jpg" />
</div>
</div>
</div>
</body>
</html>
<css>部分代碼：
*{margin:0;
padding:0;}
main{position:relative;}
.box{padding:15px 0 0 15px;
float:left;}
.pic{padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:0 0 5px #ccc;}
.pic img{width:165px;
height:auto;}
<javascript>部分代碼：
window.onload=function(){
waterfall('main','box');
var dataInt={"date":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'10.jpg'},{"src":'12.jpg'}]};
window.onscroll=function(){
if(checkScrollSlide()){
var oParent=document.getElementById('main');
//將數(shù)據(jù)塊渲染到頁面的尾部
for(var i=0;i<dataInt.date.length;i++){
var oBox=document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var oPic=document.createElement('div');
oPic.className='pic';
oBox.appendChild(oPic);
var oImg=document.createElement('img');
oImg.src="images/"+dataInt.date[i].src;
oPic.appendChild(oImg);
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
//獲取main下所有class為box的元素
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
//計算整個頁面顯示的列數(shù)（即頁面寬/box寬）
var oBoxW=oBoxs[0].offsetWidth; //'offsetWidth'表示對象可見的寬度
var cols=Math.floor(document.documentElement.clientWidth/oBoxW); //"Math.floor()方法用于對值進行取整"
//設置父級main的寬度，以及水平居中
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
//取出存放每一列高度的數(shù)組
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr); //Math.min()方法不支持傳遞數(shù)組托慨；Math.min.apply(參數(shù)1,參數(shù)2)鼻由，參數(shù)1傳遞作用域，參數(shù)2傳遞數(shù)組厚棵；
var index=getMinhIndex(hArr,minH);
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.left=oBoxW*index+'px'; //同等于oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
//設置更新添加了塊框后的高
hArr[index]+=oBoxs[i].offsetHeight;
}
}
console.log(hArr);
}
//根據(jù)class獲取元素
function getByClass(parent,clsName){
//獲取父元素的所有子集
var oElements=parent.getElementsByTagName('*');
var boxArry=new Array(); //用來存儲獲取到的所有class為box的元素
//遍歷子元素
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArry.push(oElements[i]);
}
};
return boxArry;
}
function getMinhIndex(arr,val){
for(var i in arr){ // for in方法就是循環(huán)蕉世，一般用于遍歷數(shù)組，相比較于for循環(huán)簡介很多
if(arr[i]==val){
return i;
}
}
}
//檢查是否具備了滾動條加載數(shù)據(jù)塊的條件
function checkScrollSlide(){
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,'box');
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);//取出最后一個box的top加上其box高度的一半
//考慮瀏覽器兼容性婆硬，算出標準模式下和混雜模式下的滾動出的距離大小
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//計算出在標準模式下和混雜模式下的瀏覽器的高度
var height=document.documentElement.clienHeight || document.body.clientHeight;
//達到指定高度后狠轻，返回true，觸發(fā)waterfall()函數(shù)
return(lastBoxH<scrollTop+height)?true:false;
}
后續(xù)的兩種方法還在更新中彬犯，請繼續(xù)期待吧向楼！
