問(wèn)答
1.瀑布流布局的原理是什么
原理:瀑布流是將寬度相同,高度不同的元素铝穷,以絕對(duì)定位的方式把每個(gè)元素放在列中最短的位置,鋪滿整個(gè)屏幕佳魔,不留空白曙聂,最后一行除外。
方法:
①計(jì)算元素寬鞠鲜,容器寬宁脊,計(jì)算出容器一排能夠容納的元素列數(shù)断国;
②創(chuàng)建一個(gè)數(shù)組,數(shù)組的長(zhǎng)度等于能夠容納的列數(shù)朦佩,數(shù)組的每一項(xiàng)就是每一列所有元素的累積高度并思,每一列高度的初始值為0;
③ 遍歷數(shù)組语稠,比較內(nèi)容列之間的高度,找到高度最短的列弄砍,獲取該列最小高度以及對(duì)應(yīng)在數(shù)組里的下標(biāo)仙畦。再以絕對(duì)定位的方式把元素放到該最短列下面(設(shè)置left、top)
④更新該列的高度音婶。就是該列加上后面添加進(jìn)去元素的高度慨畸,計(jì)算累積高度寫(xiě)入數(shù)組中
⑤監(jiān)聽(tīng)resize事件,適應(yīng)屏幕的大小的變化
然后繼續(xù)尋找所有列的各元素之和的最小者衣式,繼續(xù)添加至該列上寸士,如此循環(huán)下去,直至所有元素均能夠按要求排列為止碴卧;