??????? 瀏覽網頁的時候經常會遇到瀑布流布局的網站。也許有些讀者不了解瀑布流。瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。比如下面圖片的效果，就是一個典型的瀑布流。
網上有很多JQ的瀑布流插件，而且都寫好了兼容，都可以嘗試去使用，這里只是跟大家分享一下原生js實現瀑布流的效果，一起學習。
```<!doctype html>
<html lang = "en">
<head>
???????????? <meta charset? = "UTF-8">
???????????? <title>原生js瀑布流</title>
<style type="text/css">
??????????? div{
???????????????????? background:#ccc;
???????????????????? width:200px;
???????????????????? position: absolute;
??????????????????? transition:0.5s;
??????????????? }
</style>
</head>
<body>
<script type="text/javascript">
function createDiv(){
for(var i =0; i<20; i++){
var div =document.createElemnet("div");
var rnd = Math.floor(Math.random()*300+50)? // div的高度在50到350之間
div.style.height = rnd+"px";
div.innerHTML = i;
document.body.appendChild(div);
}
change()
}
function change(){
var aDiv = document.getElementsByTagName('div');
var windowCw = document.documentElement.clientWidth;? //窗口可視的寬度
var n? = Math.floor(windowCw/210);?? /一行可以容納幾個div，并向下取整
if (i<=0){
return}
var t =0;
var center = (windowCw-n*210)/2;???????? //居中
var arrH = []; //定義一個空數組，存放div的高度
for(var i= 0;i<arrH.length;i++){
var j = i%n;
if (arrH.length==n) {? ? ? ? ? ? ? ? ? ? //一行排滿n個后到下一行
var min = findMin(arrH);? ? ? ? ? ? ? //從最“矮”的排起，可以從下圖的序號中看得出來，下一行中序號是從矮到高排列的
aDiv[i].style.left =center + min*210 + "px";
aDiv[i].style.top = arrH[min]+10 + "px";
arrH[min] += aDiv[i].offsetHeight + 10;
// alert(min);
}else{
arrH[j] = aDiv[i].offsetHeight;
aDiv[i].style.left =center + 200*j+10*j + "px";
aDiv[i].style.top = 0;
}
};
}
window.onresize = function(){? ? ? //窗口改變也調用函數
change();
}
window.onscroll= function? () {
// 頁面總高度
var bodyHeight = document.documentElement.offsetHeight;
// 可視區高度
var windowHeight = document.documentElement.clientHeight;
//滾動條的高度
var srcollTop = document.documentElement.scrollTop || document.body.scrollTop;
var srcollH = document.body.scrollHeight;
// alert(srcollH);
if (srcollTop+windowHeight? >= srcollH-20) {
createDiv();
};
}
function findMin(arr) {
var m = 0;
for (var i = 0; i < arr.length; i++) {
m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;
}
return m;
}
</script>
</body>
</html>
```
