基本結(jié)構(gòu)

每一張圖片，外層是不可見(jiàn)的box，中間是可見(jiàn)的pic裝著img，要求盒子寬度固定。

距離控制

要使多個(gè)盒子間隙相同時(shí)，指定向左浮動(dòng)并且設(shè)定box的上左內(nèi)邊距即可，因?yàn)閎ox不可見(jiàn)，實(shí)現(xiàn)的效果就類(lèi)似于pic互相間隔開(kāi)。

排列規(guī)則

先固定第一行，然后按照第一行的寬高，將后續(xù)圖片插入上一行最短的圖片下面。

獲取文檔寬度和每個(gè)盒子寬度（此處取第一個(gè)盒子），然后相除獲得一行排列盒子的個(gè)數(shù)，將容器設(shè)置為盒子。

定位第一行盒子：top為0，left為單個(gè)盒子寬度×盒子順序的下標(biāo)，將每一列盒子的高度存儲(chǔ)在一個(gè)數(shù)組中。

獲取第一行盒子高度的最小值（Math.min），然后依次比較確定是第幾個(gè)盒子，對(duì)于順序大于cnum的盒子，即第一行以后，位置即在第一行最短的盒子之下，定位為absolute，top值為最短盒子的高度，left值和上面的最短盒子一樣。

然后將盒子高度的數(shù)組相應(yīng)列數(shù)的高度值更新，繼續(xù)排列下一個(gè)盒子。

更新圖片

當(dāng)滾動(dòng)條拉到最后張圖片露出一半時(shí)，加載剩余的圖片。

A 是最后一個(gè) box 盒子的上邊距（offsetTop），B 是最后一個(gè)盒子高度的一半，C 是用戶(hù)拉動(dòng)滾軸的長(zhǎng)度（scrollTop），D 是頁(yè)面高度（clientHeight）。從上圖可以看出，當(dāng)最后的 box 盒子沒(méi)出到一半時(shí)滿(mǎn)足
A+B>C+D
而當(dāng)最后一個(gè)盒子出來(lái)一半時(shí)應(yīng)該加載剩余圖片了，此時(shí)A+B

適應(yīng)瀏覽器寬度變化

一行能排列的盒子個(gè)數(shù)在文檔剛加載完成時(shí)就固定了。當(dāng)后續(xù)改變寬度時(shí)，需要隨之進(jìn)行改變。
在window.onresize時(shí)調(diào)用waterfall函數(shù)。