實(shí)現(xiàn)一個(gè)瀑布流布局效果
原理:利用絕對定位,位置可能不是按照1,2,3順序排列
1、計(jì)算容器內(nèi)一行可以放置多少元素,方法:容器寬度/元素寬度,取整
2、把每行中的所有元素的高度值存入一個(gè)空數(shù)組
3、在數(shù)組中找出最小高度值的值minValue及其下標(biāo)minIndex
4、把第二行第一個(gè)元素定位到minValue的下面
top: minValue(包含了包括內(nèi)邊距、邊框、外邊距的高度值)
left: minIndex*元素寬度(包含了包括內(nèi)邊距、邊框、外邊距)
5、重置當(dāng)前高度值數(shù)組的最小值
6、以此類推
https://101piano.github.io/adtask-18-waterfall/waterfall.html