瀑布流布局
瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
布局效果
原理
瀑布流布局要求要进行布置的元素等宽计算浏览器宽度与元素的宽度之比，得到列数创建数组，存储每列元素总高度each遍历循环各个图片，判断是否为第一排，若是，则将元素高度直接加入数组中，若不是，则定位布置到高度最小的一列，同时更新当前列的总高度。
jQuery获取元素宽度
在jQuery中，四种宽度
width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。 对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true); 实例：
<p id="p_obj" style=" width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("#p_obj");
alert(obj.width());//200
alert(obj.innerWidth());//220
alert(obj.outerWidth());//240
alert(obj.outerWidth(true));//260
});
});
</script>
定位布置
元素css为
position：absolute；left：最小高度盒子的索引*盒子的宽度top：最小盒子的高度 求最小盒子高度，即获取数组中的最小值，利用Math.min方法获取最小值。但我们知道Math.min()参数不能为数组，而为序列。于是利用ES6中的扩张运算符…转换。代码如下：
//最小图片高度，求数组中的最小值
var minBoxHeight=Math.min(...heightArr);
求数组中最小值的索引，利用jQuery中的inArrays(查找的值，数组)方法返回查找值所的索引，如果不存在则返回-1。
//最小的索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)
var minBoxIndex=$.inArray(minBoxHeight,heightArr)
最后定位布置，高度追加
var minBoxIndex=$.inArray(minBoxHeight,heightArr)
$(item).css({
position:'absolute',
left:minBoxIndex*boxWidth+'px',
top:minBoxHeight+'px'
})
//高度追加
heightArr[minBoxIndex]+=boxHeight;
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="./js/demo1.js"></script>
<title>Document</title>
<style>
#main{
position: relative;
}
.box{
width: 280px;
padding: 5px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div><img class="box" src="./img/1.jpg"/></div>
<div><img class="box" src="./img/2.jpg"/></div>
<div><img class="box" src="./img/3.jpg"/></div>
<div><img class="box" src="./img/4.jpg"/></div>
<div><img class="box" src="./img/5.jpg"/></div>
<div><img class="box" src="./img/6.jpg"/></div>
<div><img class="box" src="./img/7.jpg"/></div>
<div><img class="box" src="./img/8.jpg"/></div>
<div><img class="box" src="./img/9.jpg"/></div>
<div><img class="box" src="./img/10.jpg"/></div>
<div><img class="box" src="./img/11.jpg"/></div>
<div><img class="box" src="./img/12.jpg"/></div>
<div><img class="box" src="./img/13.jpg"/></div>
<div><img class="box" src="./img/14.jpg"/></div>
<div><img class="box" src="./img/15.jpg"/></div>
<div><img class="box" src="./img/16.jpg"/></div>
</div>
</body>
</html>
jQuery代码
// $(function(){
// waterFall()
// })//dom元素加载完就执行js
$(window).on('load',function(){
waterFall();
})//等到dom元素，图片，内容都加载完才会执行js
function waterFall(){
var box=$(".box");
var boxWidth=box.innerWidth();//当前图片宽度
var screenWidth=$(window).width();//当前屏幕宽度
//求出列数
var cols=parseInt(screenWidth/boxWidth);
//创建数组
var heightArr=[];
//遍历循环，除第一排不需要定位，取高度值其他排定位处理
$.each(box,function(index,item)
{
//取出对应图片的高度
var boxHeight=$(item).innerHeight();
if(index<cols)//是不是第一排的
{
heightArr[index]=boxHeight;
}
else{
//最小图片高度，求数组中的最小值
var minBoxHeight=Math.min(...heightArr);
//最小的索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)
var minBoxIndex=$.inArray(minBoxHeight,heightArr)
$(item).css({
position:'absolute',
left:minBoxIndex*boxWidth+'px',
top:minBoxHeight+'px'
})
//高度追加
heightArr[minBoxIndex]+=boxHeight;
}
})
}
