比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
例如：找网上找了一张比较漂亮的瀑布流布局的图片
下面我们就来实现一下布局
前提：图片的宽度固定，高度不固定。
效果：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
margin: 10px;
column-count: 3; // 每行显示的几个
column-gap: 10px;
}
.box div {
margin-bottom: 10px;
}
</style>
</head>
<body>
</body>
效果：
css实现瀑布流布局不止这两种方法，也可以利用flex布局，我这边就不写了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>瀑布流</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#main{
margin :0 auto;
position: relative;
}
.box{
float: left;
padding: 15px 0 0 15px;
}
.pic{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.box .pic{
width: 200px;
}
</style>
</head>
<body>
<script type="text/javascript"> window.onload = function(){ waterfall(‘main‘,‘box‘); } function waterfall(parent,box){ //获取main元素 var oparent = document.getElementById(parent); //获取所有 box 元素 var obox = getClass(‘box‘); //获取每行能放多少个 居中摆放 var w = document.body.clientWidth||document.documentElement.clientWidth; //var w =1000; var oneWidth = obox[0].offsetWidth; var num = Math.floor(w/oneWidth); main.style.width = num*oneWidth+‘px‘; //瀑布流原理 left-下标*图片width top-上面图片高 var hrr = []; for(var i=0;i<obox.length;i++){ if(i<num){ hrr.push(obox[i].offsetHeight); }else{ var min = Math.min.apply(null,hrr); var index = getindex(hrr,min); obox[i].style.position = ‘absolute‘; obox[i].style.left = index*oneWidth+‘px‘; obox[i].style.top = min+‘px‘; hrr[index] += obox[i].offsetHeight; } } console.log(hrr); } //获取 数组内指定值的 序号 function getindex(hrr,h){ for(var i=0;i<hrr.length;i++){ if(hrr[i]==h){ return i; } } } //统计所有指定class名称的元素 function getClass(a){ var doms = document.getElementsByTagName(‘*‘); var reg = new RegExp(‘\\b‘+a+‘\\b‘); var arr = []; for(var i=0;i<doms.length;i++){ if(reg.test(doms[i].className)){ arr.push(doms[i]); } } return arr; } </script>
效果：
其实juery和javascript实现差不多，但是比js简便多了，我这边就不写了。
多一点学习多一点分享...
原文：https://www.cnblogs.com/0314dxj/p/12808939.html