瀑布流布局

一、问答

  • 原理:
    因为瀑布流的特点是等宽不等高,因此若直接float的话会造成上下间隙不一或过大,因此所有元素是通过计算后的位置再通过绝对定位往最短高度的一列下面塞,以此类推;

  • 具体实现:
    计算出容器的width,通过单个元素的宽度(因为瀑布流的特点就是等宽不等高)计算出可以放多少列元素;
    将每一列构成一个数组集合,数组里面的值即为每一列的累计高度;
    遍历存放元素的数组比较元素之间的高度,并筛选出最小高度的元素;
    遍历每个元素,并将元素依次绝对定位到数组中每列元素的累计高度之和值最小的下面,当次最小高度的列需要加上后面添加进去的元素的高度,这样才是累计高度;

二、代码

简单实现

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

推荐阅读更多精彩内容