瀑布流

题目1: 实现一个瀑布流布局效果

瀑布流布局

原理:

瀑布流布局,就是一堆等宽不等高的盒子元素,使用绝对定位的方式,根据盒子高度自动放入最短栏队列排齐。

由于盒子元素宽度固定,根据父容器的宽度,计算一行可以放多少个盒子。用(父元素宽度/盒子宽度)获得多少列。

新建一个记录列高度的数组,这个数组存放盒子排列后的每列的高度,列数是这个数组的长度,初始均为0.

遍历数组,查找数值最小的元素(列高最低)及其下标,将下一个元素放到对应的位置,由于使用绝对定位,距离父容器的top=列高最低的高度,距离父容器的left=每列的宽度*数组的下标(列的个数)

摆放好元素后,更新这个位置的高度,重新遍历数组,重复上一步操作,直到元素排列完成

题目2 (选做): 根据课程视频实现一个新闻瀑布流新闻网站

新闻瀑布流新闻网站

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

推荐阅读更多精彩内容