html代码
```
<div class="warpper">
<div class="box"><img src="./images/01.jpg" alt=""></div>
<div class="box"><img src="./images/02.jpg" alt=""></div>
<div class="box"><img src="./images/03.jpg" alt=""></div>
<div class="box"><img src="./images/04.jpg" alt=""></div>
<div class="box"><img src="./images/05.jpg" alt=""></div>
<div class="box"><img src="./images/06.jpg" alt=""></div>
...
</div>
```
css代码
```
<style>
* {
padding: 0;
margin: 0;
}
.box {
padding: 10px;
display: inline-block;
float: left;
}
.box img {
width: 200px;
border: 1px solod #dddddd;
}
</style>
```
js代码
```
$(function() {
waterFall();
})
/*
图片定位
position : absolute
left : 最小的索引*图片的宽度
top ： 最小图片的高度
数组 ： [150, 150, 100, 200]
列数 ： 200/1300
*/
function waterFall() {
//求出列数
var box = $('.box');
var boxwidth = box.outerWidth(); //当前图片宽度
var screenwidth = $(window).width(); //获取屏幕宽度
var cols = parseInt(screenwidth / boxwidth);
//创建数组
var heigtArr = [];
//图片遍历循环，第一排不需要定位，取高取值，其它排 定位处理
$.each(box, function(index, item) {
//取出图片的高度
var boxHeight = $(item).outerHeight();
if (index < cols) { //是不是第一排
heigtArr[index] = boxHeight; //var arr = []; arr[0] = 1, arr[1]=2..
//heigtArr[index].css({ float: 'left' });
} else {
//最小图片的高度
//数组中最小的值 var arr = [100, 50, 260]
var minBoxHeight = Math.min(...heigtArr);
//最小的索引 $.inArray() 用于查找数组中指定的值 ，返回索引（未匹配返回-1）
var minBoxindex = $.inArray(minBoxHeight, heigtArr);
$(item).css({
position: 'absolute',
left: minBoxindex * boxwidth + 'px',
top: minBoxHeight + 'px'
});
//高度追加
heigtArr[minBoxindex] += boxHeight;
}
})
}
```
