基本結(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ù)。