demo
思路：
我手里有一堆圖片，想要按一定的規(guī)則去擺放他們，嗯，瀑布流先設(shè)置圖片寬度相等，因?yàn)楦鷶[放規(guī)則有關(guān)的，規(guī)則就是在父容器里啊，擺成n列，這個(gè)n，就是父容器的寬度除以圖片的絕對寬度得到的那個(gè)整數(shù)了。
確定擺幾列了，就開始擺放了。
當(dāng)?shù)谝粋€(gè)圖片開始加載了，把它放第一列第一的位置，第二個(gè)圖片加載了，放第二列，，，以此類推，直到第n列擺好了。
這時(shí)候，第n+1張圖加載了，放第幾列的下面？規(guī)則是放到現(xiàn)在列的高度最低的那列，這規(guī)則一直持續(xù)到最后，所以，之后每個(gè)圖片加載了，放在哪里，都要判斷下，此時(shí)的哪列的高度最低，放好圖片后，這個(gè)列的高度就加上這圖片的絕對高度。這就是邏輯了。怎么用代碼操作了？
- 圖片放的時(shí)候，位置就是要絕對定位的，top值就是那個(gè)最低列的高度，就是之前加到這個(gè)列的圖片的高度之和。left值就是圖片的寬度乘以，它的列的序數(shù)減一的值。
- 需要一個(gè)數(shù)組，數(shù)組的長度代表有多少列，數(shù)組的里面的位的值代表對應(yīng)列的高度。比較出哪一列的高度最低，就是要遍歷數(shù)組，比較得出，最后，再把高度更新一下。每當(dāng)一張圖片加載了，就比較一次，放一次圖片，再更新下高度。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>瀑布流</title>
<style>
.waterfall {
max-width: 600px;
border: 1px solid;
}
img {
position: absolute;
width: 100px;
margin: 10px;
transition: all .4s;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="waterfall">
</div>
<script>
var imgwid = $('.waterfall img').outerWidth(true)
var count = Math.floor($('.waterfall').width() / imgwid)
var heiarr = []
for (var i = 0; i < count; i++) {
heiarr[i] = 0
}
$('.waterfall img').on('load', function() {
var minval = heiarr[0]
var minindex = 0
for (var i = 0; i < count; i++) {
console.log(heiarr)
if (heiarr[i] < minval) {
minval = heiarr[i]
minindex = i
}
}
console.log(minval, minindex)
console.log(minindex * imgwid)
$(this).css({
left: minindex * imgwid,
top: minval
})
heiarr[minindex] += $(this).outerHeight(true)
})
</script>
</body>
</html>
