图标瀑布流显示是什么意思(瀑布流的效果布局) ， 小编带你了解更多信息 。
前言
2019年终岁尾 ， 最近对布局相关的内容比较有兴趣 ， 在此整理一下和瀑布流相关的使用场景以及多种实现方案 。
瀑布流布局
瀑布流又称瀑布流式布局 ， 是一种比较流行的页面布局方式 ， 专业的英文名称为[ MasonryLayouts] 。与传统的分页显示不同 ， 视觉表现为 参差不齐的多栏布局 ， 最早是由Pinterest首先运用 。
无图无真相：
文章插图
如图所示 ， 网页上呈现 参差不齐的多栏布局 ， 图片 等宽不等高 ， 根据图片原比例缩放直至宽度达到固定的要求 ， 每行排满后 ， 后面的元素依次添加到其后 ， 视觉上显得错落有致不拘一格 。
瀑布流的优点
优点如下：
节省空间 ， 外表美观 ， 更有艺术性 。对于触屏设备非常友好 ， 通过向上滑动浏览用户浏览时的观赏和思维不容易被打断 ， 留存更容易 。从体验的心理讲 ， 女性是一种逛街数小时都不需要停歇的生物 ， 一眼望不到头的瀑布流契合了这种心理 。瀑布流的图片就像商品 ， 就像逛街、就像扫货 。女性只要不断往下拉伸页面 ， 就像置身在一条没有尽头的购物街 ， 没有层高限制的商场中一样 。传统布局中的下一页就是打断 ， 好比男朋友轻声在耳边说了句：休息一下吧 ， 我累了……结果不言而喻~
瀑布流的缺点
缺点如下：
用户无法了解内容总长度 ， 对内容没有宏观掌控 。用户无法了解现在所处的具体位置 ， 不知道离终点还有多远 。回溯时不容易定位到之前看到的内容 。容易造成页面加载的负荷 。容易造成用户浏览的疲劳 ， 没有短暂的休息时间 。我自己是一名从事了多年开发的web前端老程序员 ， 目前辞职在做自己的web前端私人定制课程 ， 今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货 ， 各种框架都有整理 ， 送给每一位前端小伙伴 ， 想要获取的可以关注我的头条号并在后台私信我：前端 ， 即可免费获取 。
瀑布流的适用场景
根据瀑布流的优缺点 ， 我们不难得出在什么情况下选择瀑布流是合理的选择：
内容以图片为主的时候 ， 瀑布流是更好的选择 。图片占用空间比较大 ， 并且大脑理解的速度相比理解文字要快 ， 短时间内可以扫过的内容很多 ， 所以如果用分页显示的话用户务必会频繁的翻页 ， 影响沉浸式的体验 ， 而瀑布流可以解决这个问题 。信息与信息之间相对独立时 ， 瀑布流是更好的选择 。如果信息关联性强 ， 用户务必会进行大量的回溯操作去查看之前或者之后的信息 ， 相反 ， 如果信息相对独立的话 ， 可以使用瀑布流 ， 让用户同时接受来自不同地方的信息 。信息与搜索匹配比较模糊时 ， 瀑布流是更好的选择 。瀑布流给人的直观印象 ， 就是同时显示的信息与用户搜索的匹配度大致一样 ， 而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配 。因此 ， 当信息与搜索匹配度没有明显区分度时 ， 可以采用瀑布流 。用户目的性不强的时候 ， 瀑布流是更好的选择 。如果用户有特定需要查找的信息 ， 分页查找定位更方便 ， 而当目的性较弱的时候 ， 瀑布流可以增加用户停留的时间和意想不到的收获 。multi-column 多栏布局实现瀑布流
通常 Multi-column用于文本的分列：
.container { column-count: 3;}
文章插图
multi-column布局中子元素的排列顺序是先 从上往下再从左至右 。
文章插图
根据这个特性 ， 我们就可以用来实现 瀑布流 。
multi-column实现 瀑布流主要依赖以下几个属性：
column-count: 设置共有几列
