瀑布流布局的原理:
在定寬不定高的一系列塊元素下,利用絕對(duì)定位布局。
- 分別為父元素和子元素設(shè)置相對(duì)定位和絕對(duì)定位
- 計(jì)算出子元素所占的列數(shù)并加入到新創(chuàng)建的一個(gè)數(shù)組
- 然后遍歷數(shù)組獲取數(shù)組的最小值
- 遍歷每個(gè)子元素設(shè)置top和left颖系,top為數(shù)組的最小值,left為數(shù)組索引數(shù)與子元素寬度相乘
- 將獲取的高度相加
在線demo
需要注意的是如果要給父元素添加邊框需要用到計(jì)算林束,因?yàn)樽釉亟^對(duì)定位無(wú)法撐起父元素的高度饮笛。
- 本博客版權(quán)歸羞澀的澀和饑人谷所有,轉(zhuǎn)載請(qǐng)注明出處