浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果，就是一个典型的瀑布流。
网上有很多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>
```
网友评论