瀑布流布局

原理:
1.瀑布流里的元素宽度都相同,用窗口宽度除以一个元素的宽度得到每行能容纳的列数。
2.创建一个空数组,用来储存每列中所有元素相加的高度。
3.先把第一行的元素的高度存储进数组。利用遍历的方法得到第一行高度最小的元素以及这个元素在数组中的索引数(index)。
4.对下一个元素使用绝对定位,将其放在上一步选中的高度最小元素的下面(top值为上一步选中元素的高度,left值为选中元素距离窗口的宽度)。
5.当元素绝对定位完成之后,将其高度和原来数组中最小的高度相加,利用之前得到的索引号更新数组。
6.这样在不断的遍历数组中,完成了所有元素的定位,达到了瀑布流的效果。

代码

代码地址
代码预览


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容