问答

1.瀑布流布局的原理是什么？

对于瀑布流，其本质是定宽不定高的列
原理：

• 获取当前视窗的宽度，计算出当前宽度能够容纳的列数（窗口宽度/元素宽度[包含边距]）
• 创建一个空数组，用来储存每列中所有元素相加的高度
• 先把第一行元素的高度储存进数组，遍历每一元素，算出数组中高度最小的元素以及这个元素在数组中的索引数（index），将图片绝对定位到高度最小的那一列
• 当元素绝对定位完成之后，将其高度和原来数组中最小的高度相加，利用之前得到的索引号更新数组，这样在不断的遍历数组中，完成所有元素的定位
• 使用resize事件触发布局函数来起到响应式
• 使用transition:all 1s;的CSS3的属性来做动画效果

代码

代码地址
代码预览

本文版权归本人和饥人谷所有，转载请注明来源。