瀑布流布局思路：
1瞳收、css樣式倍靡，圖片的父級(jí)div樣式設(shè)置為定位或者浮動(dòng)猴伶。
2、找出圖片父級(jí)元素（box）和最外元素（main）塌西；獲取box的寬度和main的寬他挎，然后計(jì)算main容器一行能容納多少個(gè)box（即有多少列）。
3捡需、聲明一個(gè)空數(shù)組（用于放置每列的高度）办桨。
4、for(var i=0;i<box.length;i++)循環(huán)遍歷所有的box元素站辉，if 判斷i是否小于上面求得的列數(shù)呢撞，設(shè)置box元素top、left和把box元素的高度添加進(jìn)空數(shù)組饰剥；如果i值大于列數(shù)就是第二行其余的box元素殊霞，查找出數(shù)組中的最小值和最小值的索引，設(shè)置box的top為這個(gè)值汰蓉，left值為box[index].offsetLeft绷蹲，更新所查找到的數(shù)組元素的值（原數(shù)組值+當(dāng)前box的高度）。
5古沥、定位和浮動(dòng)脫離了文檔流瘸右，最高給main設(shè)置高度為數(shù)組的最大值。
瀑布流感悟
1岩齿、先要計(jì)算出當(dāng)前可視頁(yè)面的寬度（當(dāng)對(duì)頁(yè)面進(jìn)行ctrl縮放時(shí) 再點(diǎn)擊刷新 圖片的列數(shù)會(huì)改變）太颤。
2、通過設(shè)置的圖片的固定寬度 （這里只設(shè)置圖片的寬度 不對(duì)圖片的長(zhǎng)度進(jìn)行設(shè)置）.pic img{ width: 200px;height: auto;height設(shè)置成auto自適應(yīng)盹沈；這樣就可以有不同的高度龄章。
進(jìn)行計(jì)算取整 得到當(dāng)前可視頁(yè)面能放多少個(gè)圖片。
3乞封、設(shè)置一個(gè)空數(shù)組 用來放置每一列的高度做裙。
4、首先第一行是從第一個(gè)開始挨個(gè)放 第一行放好后 放置第二行時(shí) 通過第一行在空數(shù)組存下的數(shù)值 遍歷找出來最小的一列 將下一張圖片放在這一列 同時(shí)放置的時(shí)候不要忘了進(jìn)行數(shù)組的更新 將數(shù)組的數(shù)值改成最新的列的高度肃晚。
