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

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

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

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

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

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

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

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

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

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


瀑布流的优点

优点如下:

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

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


瀑布流的缺点

缺点如下:

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


瀑布流的适用场景

  • 内容以图片为主的时候,瀑布流是更好的选择。图片占用空间比较大,并且大脑理解的速度相比理解文字要快,短时间内可以扫过的内容很多,所以如果用分页显示的话用户务必会频繁的翻页,影响沉浸式的体验,而瀑布流可以解决这个问题。
  • 信息与信息之间相对独立时,瀑布流是更好的选择。如果信息关联性强,用户务必会进行大量的回溯操作去查看之前或者之后的信息,相反,如果信息相对独立的话,可以使用瀑布流,让用户同时接受来自不同地方的信息。
  • 信息与搜索匹配比较模糊时,瀑布流是更好的选择。瀑布流给人的直观印象,就是同时显示的信息与用户搜索的匹配度大致一样,而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此,当信息与搜索匹配度没有明显区分度时,可以采用瀑布流。
相关文章
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
Transformer图解
Transformer 是一种在自然语言处理(NLP)领域广泛使用的模型架构该模型通过Self-Attention机制和位置编码技术替代传统的RNN结构,实现了并行处理和更有效的长距离依赖捕捉。Transformer主要由编码器(Encoder)和解码器(Decoder)两部分组成,其中编码器负责处理输入序列,解码器则基于编码器的输出生成目标序列。每一层的编码器和解码器内部均采用多头注意力机制(Multi-Head Attention)、前馈神经网络以及残差连接和归一化层,以增强模型的学习能力和稳定性。此外,位置编码的引入使得模型能够在处理无序的输入序列时保留词语的位置信息。
329 13
|
11月前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
406 4
|
测试技术 数据库 Python
SQLAlchemy的同步和异步的代码对比
这篇文章比较了SQLAlchemy同步和异步操作的代码差异,包括创建数据库引擎、会话、执行查询、新增、编辑和删除数据的不同方式。
381 7
|
JavaScript 数据安全/隐私保护
v-model和.sync的区别
v-model和.sync的区别
264 0
|
12月前
|
SQL Java API
深入探索Java的持久化技术——JPA(Java Persistence API)
【10月更文挑战第10天】深入探索Java的持久化技术——JPA(Java Persistence API)
416 0
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
数据挖掘 Linux Shell
linux 使用crontab 创建定时任务
linux 使用crontab 创建定时任务
251 0
linux 使用crontab 创建定时任务
|
API 数据安全/隐私保护
"401 Unauthorized" 问题处理
【6月更文挑战第10天】"401 Unauthorized" 问题处理
5713 0
|
编解码 前端开发 UED
前端布局方式及其优缺点
前端布局方式及其优缺点
196 1