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;
}
})
}
```
