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

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

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

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

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

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

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

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

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

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


瀑布流的优点

优点如下:

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

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


瀑布流的缺点

缺点如下:

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


瀑布流的适用场景

  • 内容以图片为主的时候,瀑布流是更好的选择。图片占用空间比较大,并且大脑理解的速度相比理解文字要快,短时间内可以扫过的内容很多,所以如果用分页显示的话用户务必会频繁的翻页,影响沉浸式的体验,而瀑布流可以解决这个问题。
  • 信息与信息之间相对独立时,瀑布流是更好的选择。如果信息关联性强,用户务必会进行大量的回溯操作去查看之前或者之后的信息,相反,如果信息相对独立的话,可以使用瀑布流,让用户同时接受来自不同地方的信息。
  • 信息与搜索匹配比较模糊时,瀑布流是更好的选择。瀑布流给人的直观印象,就是同时显示的信息与用户搜索的匹配度大致一样,而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此,当信息与搜索匹配度没有明显区分度时,可以采用瀑布流。
相关文章
|
6月前
|
人工智能 供应链
医疗器械唯一标识(UDI)GS1-code128码
医疗器械唯一标识(UDI)采用GS1-Code 128条码,符合全球标准,实现高效追溯。该码基于GS1系统,通过FNC1识别与AI标识符结构化数据,支持GTIN、批号、序列号等信息编码,广泛应用于医疗、物流等领域,确保产品全生命周期可追踪,提升监管与管理效率。(238字)
918 3
|
安全 前端开发 Java
基于springboot的微信公众号管理系统(支持多公众号接入)
基于springboot的微信公众号管理系统(支持多公众号接入)
757 2
|
SQL Java 数据库连接
mybatis常见分页技术和自定义分页原理实战
mybatis常见分页技术和自定义分页原理实战
1223 0
C#学习相关系列之多线程---ConfigureAwait的用法
C#学习相关系列之多线程---ConfigureAwait的用法
810 0
|
Java Linux Apache
Maven下载和配置教程:Windows、Mac和Linux系统安装指南
Maven下载和配置教程:Windows、Mac和Linux系统安装指南
2005 0
|
4月前
|
前端开发 API 语音技术
从零搭建一个免费的文本转语音在线工具(基于 Python3 + Edge TTS)
最近有个需求,需要把一段文字转换成语音,找了几个在线工具,要么收费,要么有水印,要么音质惨不忍睹。后来发现微软 Edge 浏览器的 TTS(Text-to-Speech)服务音质非常好,而且免费开放使用。于是动手写了一个在线工具,分享给大家。
990 2
|
11月前
|
机器学习/深度学习 自然语言处理 机器人
Sora模型背后的技术
Sora模型是基于Transformer架构的创新自然语言处理模型,融合自注意力机制、动态学习策略和多任务优化,显著提升文本生成与理解能力。其引入强化学习和多模态处理,拓展了在智能客服、内容创作、医疗、法律等领域的广泛应用,未来将与大数据、物联网和机器人技术深度融合,推动人工智能发展迈向新高度。
|
人工智能 监控 前端开发
AI工具:前端与后端的终极对决?谁将成为新时代的宠儿?
深入探讨AI工具对前端和后端开发的具体影响、各自的机遇与挑战,并分析未来开发者如何驾驭AI,实现能力跃迁。
762 0
|
Ubuntu 应用服务中间件 nginx
docker入门-快速学会docker
本文介绍了Docker的基本概念,包括镜像、容器、tar文件、Dockerfile和仓库,并通过实际操作演示了如何使用Docker。从拉取Nginx镜像、运行容器、修改容器内容、保存容器为新镜像,到使用Dockerfile构建自定义镜像,最后讲解了如何保存和恢复镜像。文中还推荐了一个在线实践平台Play with Docker,方便读者快速上手Docker。
1220 5
docker入门-快速学会docker
|
测试技术 数据库 Python
SQLAlchemy的同步和异步的代码对比
这篇文章比较了SQLAlchemy同步和异步操作的代码差异,包括创建数据库引擎、会话、执行查询、新增、编辑和删除数据的不同方式。
966 8