30.瀑布流布局

问答

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

原理:瀑布流是将宽度相同,高度不同的元素,以绝对定位的方式把每个元素放在列中最短的位置,铺满整个屏幕,不留空白,最后一行除外。
方法:
①计算元素宽,容器宽,计算出容器一排能够容纳的元素列数;
②创建一个数组,数组的长度等于能够容纳的列数,数组的每一项就是每一列所有元素的累积高度,每一列高度的初始值为0;
③ 遍历数组,比较内容列之间的高度,找到高度最短的列,获取该列最小高度以及对应在数组里的下标。再以绝对定位的方式把元素放到该最短列下面(设置left、top)
④更新该列的高度。就是该列加上后面添加进去元素的高度,计算累积高度写入数组中
⑤监听resize事件,适应屏幕的大小的变化
然后继续寻找所有列的各元素之和的最小者,继续添加至该列上,如此循环下去,直至所有元素均能够按要求排列为止;

代码

1.实现如下瀑布流布局

预览
demo

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

推荐阅读更多精彩内容

  • 问答 1.瀑布流布局的原理是什么? 对于瀑布流,其本质是定宽不定高的列原理: 获取当前视窗的宽度,计算出当前宽度能...
    小木子2016阅读 1,586评论 0 0
  • 问答 瀑布流布局的原理是什么 瀑布流布局要求要进行布置的元素等宽,然后计算元素的宽度与浏览器宽度之比,得到需要布置...
    ReedSun_QD阅读 1,612评论 1 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • github地址little-waterfall-framework-** 这里把整一个瀑布流小框架的实现思路写出...
    Tuberose阅读 11,565评论 12 123
  • 文|余语于隅 对于我来说,像这样放着手头上的业务专门驻村,这已经不是第一次。 刚参加工作的时候,在五合,到高黎贡山...
    余语于隅阅读 4,662评论 0 5