基本結(jié)構(gòu)
每一張圖片，外層是不可見的box祖娘，中間是可見的pic裝著img失尖，要求盒子寬度固定。
距離控制
要使多個(gè)盒子間隙相同時(shí)渐苏，指定向左浮動(dòng)并且設(shè)定box的上左內(nèi)邊距即可掀潮，因?yàn)閎ox不可見，實(shí)現(xiàn)的效果就類似于pic互相間隔開琼富。
排列規(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 是用戶拉動(dòng)滾軸的長度（scrollTop），D 是頁面高度（clientHeight）挑胸。從上圖可以看出痒筒，當(dāng)最后的 box 盒子沒出到一半時(shí)滿足
A+B>C+D
而當(dāng)最后一個(gè)盒子出來一半時(shí)應(yīng)該加載剩余圖片了，此時(shí)A+B
適應(yīng)瀏覽器寬度變化
一行能排列的盒子個(gè)數(shù)在文檔剛加載完成時(shí)就固定了茬贵。當(dāng)后續(xù)改變寬度時(shí)簿透，需要隨之進(jìn)行改變。
在window.onresize時(shí)調(diào)用waterfall函數(shù)解藻。
