一、瀑布流的布局原理是什么？
1.計(jì)算出瀏覽器可以橫向排列元素的個(gè)數(shù)（元素的寬度都是相同的）：瀏覽器的寬度/元素的寬度晨缴；如果元素有內(nèi)外邊距和邊框们拙，可以通過(guò)outerWidth(true)獲取装盯。排列元素使用絕對(duì)定位position:absolute，其父元素使用相對(duì)定位position:reletive验夯。
2.定義一個(gè)用于存放元素高度和的數(shù)組猖吴，遍歷該數(shù)組找到數(shù)組中最小高度的元素，根據(jù)該元素的下標(biāo)計(jì)算出top和left值挥转。然后使用jQuery的css ()方法把下一行第一個(gè)元素放到該最小高度元素的下面海蔽。
3.重新定義數(shù)組的高度共屈，并遍歷，放置元素党窜。
4.示范代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#ct{
position: relative;
}
#ct:after{
content: "";
display: block;
clear: both;
}
.item{
/*position: absolute;*/
width: 200px;
margin-right: 10px;
margin-top: 10px;
transition: all 1s;
float: left;
}
.wrap1{
background: pink;
height: 320px;
}
.wrap2{
background: green;
height: 200px;
}
.wrap3{
background: blue;
height: 380px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<div id="ct">
<div class="item wrap1">1</div>
<div class="item wrap2">2</div>
<div class="item wrap3">3</div>
<div class="item wrap2">4</div>
<div class="item wrap1">5</div>
<div class="item wrap3">6</div>
<div class="item wrap1">7</div>
<div class="item wrap3">8</div>
<div class="item wrap2">9</div>
<div class="item wrap3">10</div>
<div class="item wrap1">11</div>
<div class="item wrap1">12</div>
<div class="item wrap3">13</div>
<div class="item wrap3">14</div>
<div class="item wrap1">15</div>
<div class="item wrap2">16</div>
<div class="item wrap3">17</div>
<div class="item wrap2">18</div>
<div class="item wrap3">19</div>
<div class="item wrap1">20</div>
<div class="item wrap2">21</div>
</div>
<script>
$(window).on("load",function(){
waterfall();
});
function waterfall(){
var $items=$(".item"), //獲取元素item
$itemWidth=$items.eq(0).outerWidth(true), //一個(gè)item的寬度
$cols=Math.floor($(window).width()/$itemWidth); //一行所占的列數(shù)
$("#ct").width($itemWidth*$cols).css("margin","0 auto");
//設(shè)置元素ct的寬度并居中
var hArr=[]; //聲明一個(gè)空數(shù)組,把前6個(gè)元素的高度放進(jìn)該數(shù)組
$items.each(function(index,value){
//遍歷每個(gè)元素,并接收兩個(gè)參數(shù)分別是元素的索引和元素的值
var $itemHeigth=$items.eq(index).outerHeight(true);
// 對(duì)應(yīng)元素的高度
if(index<$cols){ //此時(shí)操作的是前六張照片
hArr[index]=$itemHeigth; //數(shù)組索引對(duì)應(yīng)元素的高度
}else{
var $minHeight=Math.min.apply(null,hArr); //獲取數(shù)組內(nèi)高度最低的元素
var $minHeightIndex=$.inArray($minHeight,hArr); //獲取數(shù)組內(nèi)高度最低元素對(duì)應(yīng)的索引
$(value).css({ //將value轉(zhuǎn)換為jQuery對(duì)象,并設(shè)置樣式
"position":"absolute",
"top":$minHeight+"px",
"left":$minHeightIndex*$itemWidth+"px"
})
hArr[$minHeightIndex]+=$items.eq(index).outerHeight(true);
//重新定義數(shù)組內(nèi)個(gè)元素的高度
}
});
}
</script>
</body>
</html>
5.還有一種方法是用css3屬性也可以實(shí)現(xiàn)瀑布流的做法拗引。這種做法的特點(diǎn)是不需要計(jì)算窗口的寬度，瀏覽器會(huì)自動(dòng)計(jì)算幌衣，只需要設(shè)置元素的列寬矾削，代碼少，性能很高豁护。缺點(diǎn)就是列寬隨著瀏覽器窗口大小進(jìn)行改變哼凯，用戶體驗(yàn)不好。還有一點(diǎn)就是css3的做法圖片是按照垂直順序排列的楚里，打亂了圖片的顯示順序断部。
css3瀑布流
