问答
1.瀑布流布局的原理是什么?
对于瀑布流,其本质是定宽不定高的列
原理:
- 获取当前视窗的宽度,计算出当前宽度能够容纳的列数(窗口宽度/元素宽度[包含边距])
- 创建一个空数组,用来储存每列中所有元素相加的高度
- 先把第一行元素的高度储存进数组,遍历每一元素,算出数组中高度最小的元素以及这个元素在数组中的索引数(index),将图片绝对定位到高度最小的那一列
- 当元素绝对定位完成之后,将其高度和原来数组中最小的高度相加,利用之前得到的索引号更新数组,这样在不断的遍历数组中,完成所有元素的定位
- 使用resize事件触发布局函数来起到响应式
- 使用transition:all 1s;的CSS3的属性来做动画效果
代码
本文版权归本人和饥人谷所有,转载请注明来源。