瀑布流布局是寬度固定珊佣,高度隨機(jī)副砍,從上到下的布局方式
父元素相對(duì)定位
(relative)
,子元素絕對(duì)定位(absolute)
且固定寬度溜歪。獲取子元素寬度和瀏覽器寬度,以便計(jì)算當(dāng)前瀏覽器寬度下可以放幾列久信。即瀏覽器寬度/元素寬度
建立一個(gè)數(shù)組窖杀,其值為每列子元素高度總和,初始值設(shè)為0
遍歷該數(shù)組得到最小值和其下標(biāo)
后一元素位置就在高度最小的那一列裙士,其
top
為原高度入客,即當(dāng)前最小高度left
為寬度*下標(biāo)重新計(jì)算該列的高度,再遍歷找出最小高度,后一元素放在高度最小的那列痊项,往后以此類推
用函數(shù)包裹
監(jiān)聽瀏覽器事件
resize
锅风,當(dāng)瀏覽器寬度有變化時(shí)酥诽,調(diào)用該函數(shù)在瀏覽器沒有變化時(shí)要默認(rèn)執(zhí)行一次函數(shù)
版權(quán)歸吳秀芳和饑人谷所有鞍泉,若有轉(zhuǎn)載,請(qǐng)注明來源