- 瀑布流布局的原理是什么
瀑布流本質(zhì)是定寬不定高的列
- 實(shí)現(xiàn)原理:
- 獲取當(dāng)前視窗的寬度,計(jì)算出當(dāng)前視窗能容納幾列
- 創(chuàng)建一個(gè)數(shù)組保存每一列的高度,算出數(shù)組中的最小值,將圖片絕對(duì)定位到高度最低的那列
//算出數(shù)組中最小值
minHeight = Math.min.apply(null,colsHeightArr)
//圖片絕對(duì)定位的top就是最小高度minHeight
//left有兩種方式獲取,第一種是最小高度那一列的left,第二種是img-box的寬度*列數(shù)
3. 將定位后圖片的高度加到放置的那一列上
4. 使用`resize`事件觸發(fā)布局函數(shù)來(lái)起到響應(yīng)式
5. 使用`transition:all 1s;`來(lái)做動(dòng)畫(huà)效果
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
