问答
1.瀑布流布局的原理是什么
原理:瀑布流是将宽度相同,高度不同的元素,以绝对定位的方式把每个元素放在列中最短的位置,铺满整个屏幕,不留空白,最后一行除外。
方法:
①计算元素宽,容器宽,计算出容器一排能够容纳的元素列数;
②创建一个数组,数组的长度等于能够容纳的列数,数组的每一项就是每一列所有元素的累积高度,每一列高度的初始值为0;
③ 遍历数组,比较内容列之间的高度,找到高度最短的列,获取该列最小高度以及对应在数组里的下标。再以绝对定位的方式把元素放到该最短列下面(设置left、top)
④更新该列的高度。就是该列加上后面添加进去元素的高度,计算累积高度写入数组中
⑤监听resize事件,适应屏幕的大小的变化
然后继续寻找所有列的各元素之和的最小者,继续添加至该列上,如此循环下去,直至所有元素均能够按要求排列为止;