什么是瀑布流布局?瀑布流式布局的优缺点

简介: 什么是瀑布流布局?瀑布流式布局的优缺点

瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式。

视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部。

是一种多列等宽不等高的一种页面布局方式,用于图片比较复杂,图片尺寸比较复杂时可以使用的一种展示方式,这种展示方式可以使页面比较美观,让人有种错落有致的感觉。

瀑布流是一种允许用户不断往下滑动,页面自动刷新呈现内容的交互形式。

瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。

沉浸式可以让用户更快、更好地进入视频情境之中,而忘记真实世界的情境,因为没有其它视频信息的干扰,能够让用户只专注于当前的视频。

设置成瀑布流样式且视频浏览模式开启沉浸式浏览后,视频播放模式会以类似“抖音上下滑"的沉浸式视频浏览方式展现。

如图所示,网页上呈现参差不齐的多栏布局,图片等宽不等高,根据图片原比例缩放直至宽度达到固定的要求,每行排满后,后面的元素依次添加到其后,视觉上显得错落有致不拘一格。


瀑布流的优点

优点如下:

  • 节省空间,外表美观,更有艺术性。
  • 对于触屏设备非常友好,通过向上滑动浏览
  • 用户浏览时的观赏和思维不容易被打断,留存更容易。

从体验的心理讲,女性是一种逛街数小时都不需要停歇的生物,一眼望不到头的瀑布流契合了这种心理。瀑布流的图片就像商品,就像逛街、就像扫货。女性只要不断往下拉伸页面,就像置身在一条没有尽头的购物街,没有层高限制的商场中一样


瀑布流的缺点

缺点如下:

  • 用户无法了解内容总长度,对内容没有宏观掌控。
  • 用户无法了解现在所处的具体位置,不知道离终点还有多远。
  • 回溯时不容易定位到之前看到的内容。
  • 容易造成页面加载的负荷。
  • 容易造成用户浏览的疲劳,没有短暂的休息时间。


瀑布流的适用场景

  • 内容以图片为主的时候,瀑布流是更好的选择。图片占用空间比较大,并且大脑理解的速度相比理解文字要快,短时间内可以扫过的内容很多,所以如果用分页显示的话用户务必会频繁的翻页,影响沉浸式的体验,而瀑布流可以解决这个问题。
  • 信息与信息之间相对独立时,瀑布流是更好的选择。如果信息关联性强,用户务必会进行大量的回溯操作去查看之前或者之后的信息,相反,如果信息相对独立的话,可以使用瀑布流,让用户同时接受来自不同地方的信息。
  • 信息与搜索匹配比较模糊时,瀑布流是更好的选择。瀑布流给人的直观印象,就是同时显示的信息与用户搜索的匹配度大致一样,而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此,当信息与搜索匹配度没有明显区分度时,可以采用瀑布流。
相关文章
|
19天前
|
移动开发 前端开发 HTML5
深掘 CSS3 Flex 布局的奥秘:打造无界限的灵活页面布局
深掘 CSS3 Flex 布局的奥秘:打造无界限的灵活页面布局
|
1月前
瀑布流的优点
瀑布流的优点
14 0
|
2月前
|
前端开发 JavaScript
瀑布流布局怎样实现
瀑布流布局怎样实现
|
2月前
|
编解码 前端开发 UED
最常见的自适应布局方案
【4月更文挑战第2天】 最常见的自适应布局方案
44 9
|
11月前
|
前端开发
前端经典圣杯布局和双飞翼布局
圣杯布局和双飞翼布局解决的问题是一样的 就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染
82 0
|
12月前
|
前端开发
前端(五):实现页面的瀑布流式布局
实现页面的瀑布流式布局
66 0
|
Web App开发 编解码 前端开发
网页布局方式
网页布局方式
87 0
|
前端开发
前端学习案例4-三栏布局2
前端学习案例4-三栏布局2
57 0
前端学习案例4-三栏布局2
|
前端开发
前端学习案例1-圣杯布局1
前端学习案例1-圣杯布局1
65 0
前端学习案例1-圣杯布局1
|
前端开发
前端学习案例5-三栏布局3
前端学习案例5-三栏布局3
59 0
前端学习案例5-三栏布局3