將長短不一的塊抹凳，進(jìn)行排序
排序規(guī)則：第一排一次排序，后面新增一塊 就比較上一排最短的一塊填充汽久，填充之后豎排的高度=（之前的高度） + （新增塊的高度）分扎，然后再按照 這個規(guī)則填充剩下的
實(shí)現(xiàn)：
分別用數(shù)組存儲當(dāng)前每一列的高度之和弧腥，數(shù)組初始化為0，所以第一列是依次排序，排完之后數(shù)組的值分別就是第一排的高度，然后依次往高度最小的地方填充
$.outerWidth(true)包裹這個元素的寬度
$.outerHeight(true)包裹這個元素的高度
代碼：
html
<div class="wrap">
<img src="https://via.placeholder.com/200x150" alt="">
<img src="https://via.placeholder.com/200x100" alt="">
<img src="https://via.placeholder.com/200x80" alt="">
<img src="https://via.placeholder.com/200x200" alt="">
<img src="https://via.placeholder.com/200x150" alt="">
<img src="https://via.placeholder.com/200x130" alt="">
<img src="https://via.placeholder.com/200x110" alt="">
<img src="https://via.placeholder.com/200x140" alt="">
<img src="https://via.placeholder.com/200x160" alt="">
<img src="https://via.placeholder.com/200x50" alt="">
<img src="https://via.placeholder.com/200x190" alt="">
<img src="https://via.placeholder.com/200x70" alt="">
</div>
<style>
.wrap {
max-width: 900px;
}
.wrap img {
width: 200px;
position: absolute;
margin: 5px;
}
</style>
jq:
//一行幾張圖
var colCount = Math.floor($('.wrap').width()/$('.wrap img').width())
var colHeightArr = []
//得到一行圖片數(shù)量設(shè)置幾個數(shù)組
for(var i = 0;i < colCount;i++){
colHeightArr[i] = 0 //[0,0,0,0]
}
//當(dāng)圖片加載后計算圖片的高度爱榔，比較出最小高度的數(shù)組
$('.wrap img').on('load',function(){
var minHeight = colHeightArr[0]
var minIndex = 0
for(var i=0;i<colCount;i++){
if(colHeightArr[i] < minHeight){
minHeight = colHeightArr[i]
minIndex = i
}
}
//把前這張圖片放到數(shù)組中高度最小的數(shù)組下
$(this).css({
left: minIndex * $('.wrap img').outerWidth(true),
top: minHeight
})
colHeightArr[minIndex] += $(this).outerHeight(true) //再把當(dāng)前這個數(shù)組加上這張圖的高度
})
