当前位置: 首页 > news >正文

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

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

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

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

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

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

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

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

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

瀑布流的优点

优点如下:

  • 节省空间,外表美观,更有艺术性。

  • 对于触屏设备非常友好,通过向上滑动浏览

  • 用户浏览时的观赏和思维不容易被打断,留存更容易。

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

瀑布流的缺点

缺点如下:

  • 用户无法了解内容总长度,对内容没有宏观掌控。

  • 用户无法了解现在所处的具体位置,不知道离终点还有多远。

  • 回溯时不容易定位到之前看到的内容。

  • 容易造成页面加载的负荷。

  • 容易造成用户浏览的疲劳,没有短暂的休息时间。

瀑布流的适用场景

  • 内容以图片为主的时候,瀑布流是更好的选择。图片占用空间比较大,并且大脑理解的速度相比理解文字要快,短时间内可以扫过的内容很多,所以如果用分页显示的话用户务必会频繁的翻页,影响沉浸式的体验,而瀑布流可以解决这个问题。

  • 信息与信息之间相对独立时,瀑布流是更好的选择。如果信息关联性强,用户务必会进行大量的回溯操作去查看之前或者之后的信息,相反,如果信息相对独立的话,可以使用瀑布流,让用户同时接受来自不同地方的信息。

  • 信息与搜索匹配比较模糊时,瀑布流是更好的选择。瀑布流给人的直观印象,就是同时显示的信息与用户搜索的匹配度大致一样,而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此,当信息与搜索匹配度没有明显区分度时,可以采用瀑布流。

相关文章:

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

瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式。 视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部。 是一种多列等宽不等高的一种页面布局方式,用于图片比较复杂&#…...

给您的 MongoDB 定期做个体检:MongoDB 诊断

新钛云服已累计为您分享739篇技术干货接下来的一些列文章会为大家介绍日常工作中常用的 NoSQL 产品 MongoDB。主要涉及到:MongoDB 的安装及基本使用 MongoDB 文档查询 MongoDB 复制集 MongoDB 分片集群的介绍及搭建 MongoDB 安全加密 MongoDB 诊断我们会用…...

【云原生进阶之容器】第五章容器运行时5.8--容器热迁移

《云原生进阶之容器》专题索引: 第一章Docker核心技术1.1节——Docker综述第一章Docker核心技术1.2节——Linux容器LXC第一章Docker核心技术1.3节——命名空间Namespace第一章Docker核心技术1.4节——chroot技术第一章Docker核心技术1.5.1节——cgroup综述...

react框架的简单认识

React框架 众所周知,React与Vue,Angular被前端开发人员称为前端的三大框架。在如今,React和Vue相对于老牌的Angular,它们的表现更为出色,常常被各大公司使用。但其中React的技术难度要稍稍大于Vue,不过为了…...

IDEA的基本使用

IDEA的基本使用IDEA的基本使用1 IDEA概述2 IDEA的下载和安装2.1 下载2.2 安装3 IDEA中层级结构介绍3.1 结构分类3.2 结构介绍project(项目、工程)module(模块)package(包)class(类)3…...

【MySQL】实验八 触发器与存储过程

文章目录 1. 创建商品价格修改记录表2. 创建触发器,当更改商品价格(price列)时,记录价格3. SQL触发器:插入新员工时,同步更新部门表相应人数4. SQL触发器:删除学生数据5. SQL触发器:创建成绩表插入触发器6. SQL存储过程:查询订单7. SQL存储过程:建立存储过程,查询课程…...

Mockito5.2.0学习

Mockito是mocking框架,它让你用简洁的API做测试。而且Mockito简单易学,它可读性强和验证语法简洁。 Mockito 是一个针对 Java 的单元测试模拟框架,它与 EasyMock 和 jMock 很相似,都是为了简化单元测试过程中测试上下文 ( 或者称之…...

用指针实现内存动态分配

导引:已知:变量在使用前必须被定义且安排好存储空间。且变量有这么一些分类:全局变量、静态局部变量【它们的储存一般是在编译时确定,在程序开始执行前完成。】自动变量【在执行进入变量定义所在的复合语句时为它们分配存储&#…...

DBSCAN聚类算法及Python实现

DBSCAN聚类算法 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一种基于密度的聚类算法,可以将数据点分成不同的簇,并且能够识别噪声点(不属于任何簇的点)。 DBSCAN聚类算法的基…...

风光及负荷多场景随机生成与缩减

目录 1 主要内容 计算模型 场景生成与聚类方法应用 2 部分程序 3 程序结果 4 程序链接 1 主要内容 该程序方法复现了《融合多场景分析的交直流混合微电网多时间尺度随机优化调度策略》3.1节基于多场景技术的随机性建模部分,该部分是随机优化调度的重要组成部分…...

lamda表达式

lamda表达式一. lamda表达式的特性二.常用匿名函数式接口2.1 Supplier接口2.2 Consumer接口2.3 Predicate接口2.4 Function接口2.5 BiFunction接口三.stream流传递先后顺序四.表达式4.1 ForEach4.2 Collect4.3 Filter4.4 Map4.5 MapToInt4.6 Distinct4.7 Sorted4.8 groupingBy4…...

MobTech 秒验|极速验证,拉新无忧

一、运营拓展新用户的难题 运营拓展新用户是每个应用都需要面对的问题,但是在实际操作中,往往会遇到一些困难。其中一个主要的难题就是注册和登录的繁琐性。用户在使用一个新的应用时,通常需要填写手机号、获取验证码、输入验证码等步骤&…...

大模型混战,阿里百度华为谁将成就AI时代的“新地基”?

从算力基础到用户生态,群雄逐鹿大模型 自2022年stable diffusion模型的进步推动AIGC的快速发展后,年底,ChatGPT以“破圈者”的姿态,快速“吸粉”亿万,在全球范围内掀起了一股AI浪潮,也促使了众多海外巨头竞…...

干翻Hadoop系列之:Hadoop前瞻之分布式知识

前言 一:海量数据价值 二:海量数据两个棘手问题 1:海量数据如何存储? 掌握分布式存储数据的思想。 A:方案1:单机存储磁盘不够加磁盘 限制问题: 1:一台计算机不能无限制拓充 2&a…...

MAE论文阅读《Masked Autoencoders Are Scalable Vision Learners》

文章目录动机方法写作方面参考Paper: https://arxiv.org/pdf/2111.06377.pdf 动机 首先简要介绍下BERT,NLP领域的BERT是基于Transformer架构,并采取无监督预训练的方式去训练模型。它提出的预训练方法在本质上是一种masked autoencoding,也就…...

代码随想录算法训练营第三十四天-贪心算法3| 1005.K次取反后最大化的数组和 134. 加油站 135. 分发糖果

1005. Maximize Sum Of Array After K Negations 参考视频:贪心算法,这不就是常识?还能叫贪心?LeetCode:1005.K次取反后最大化的数组和_哔哩哔哩_bilibili 贪心🔍 的思路,局部最优&#xff…...

比较系统的学习 pandas (2)

pandas 数据读取与输出方法和常用参数 1、读取 CSV文件 pd.read_csv("pathname",step,encoding"gbk",header"infer",name[],skip_blank_linesTrue,commentNone) path : 文件路径 step : 指定分隔符,默认为 逗号 enco…...

怎么查看电脑主板最大支持多少内存?

很多电脑,内存不够用,但应速度慢;还有一些就是买了很大的内存条,但是还是反应慢;这是为什么呢?我今天明白了,原来每个电脑都有自己的适配内存,就是每个电脑能支持多大的内存&#xf…...

数据结构——线段树

线段树的结构 线段树是一棵二叉树,其结点是一条“线段”——[a,b],它的左儿子和右儿子分别是这条线段的左半段和右半段,即[a, (ab)/2 ]和[(ab)/2 ,b]。线段树的叶子结点是长度为1的单位线段[a,a1]。下图就是一棵根为[1,10]的线段树&#xff1…...

【C++进阶】实现C++线程池

文章目录1. thread_pool.h2. main.cpp1. thread_pool.h #pragma once #include <iostream> #include <vector> #include <queue> #include <thread> #include <mutex> #include <condition_variable> #include <future> #include &…...

AI代码助手与Django全栈开发:人机协同编程新范式实践

1. 项目概述&#xff1a;当AI代码助手遇上Django全栈开发如果你是一名独立开发者、初创公司的技术负责人&#xff0c;或者正在学习全栈开发&#xff0c;那么“Cursor-Django”这个项目绝对值得你花时间研究。这不是一个简单的Django教程&#xff0c;而是一个由Coding for Entre…...

声明式应用编排框架Planifest:云原生时代应用交付新范式

1. 项目概述&#xff1a;一个面向未来的声明式应用编排框架如果你和我一样&#xff0c;在云原生和自动化运维领域摸爬滚打了几年&#xff0c;就会深刻体会到“编排”这个词的分量。从早期的Shell脚本&#xff0c;到Ansible、Terraform&#xff0c;再到Kubernetes的YAML海洋&…...

实在Agent如何破解成本分析报告编制耗时耗力与数据滞后?企业架构师的避坑指南

摘要&#xff1a;在2026年的今天&#xff0c;尽管AI技术已深度普及&#xff0c;但许多企业的财务与运营部门仍深陷“数据泥潭”。传统的成本分析报告编制依赖于大量的人工导数、Excel汇总及跨系统搬运&#xff0c;导致报告产出即滞后&#xff0c;严重误导决策。作为一名深耕行业…...

正交设计实战指南:从理论到最优方案验证

1. 正交设计入门&#xff1a;从概念到实战价值 第一次接触正交设计是在五年前的一个电机工艺优化项目上。当时面对12个关键参数、每个参数4-5个水平的选择困境&#xff0c;如果做全面实验需要3125组数据&#xff0c;而项目周期只允许做50组实验。正是正交设计让我们用36组实验…...

从零构建MCP服务:AI Agent扩展与外部工具集成实战

1. 项目概述&#xff1a;从零构建你的第一个MCP服务最近在AI应用开发圈里&#xff0c;MCP&#xff08;Model Context Protocol&#xff09;这个词的热度越来越高。简单来说&#xff0c;它就像是为AI大模型&#xff08;比如Claude、GPTs&#xff09;连接外部工具和数据源的一套“…...

AMD NPU加速GPT-2微调:边缘AI训练实战解析

1. AMD NPU与客户端AI训练的技术背景在AI模型部署领域&#xff0c;边缘计算正经历着从单纯推理到完整训练工作流的范式转变。传统上&#xff0c;像GPT-2这样的语言模型训练完全依赖云端GPU集群&#xff0c;但这种方式存在数据隐私泄露、网络延迟和持续服务依赖等固有缺陷。AMD …...

ToyKind-World:基于Python的ECS架构多智能体模拟框架构建指南

1. 项目概述与核心价值最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“ToyKind-World”。光看这个名字&#xff0c;你可能会觉得有点抽象&#xff0c;是玩具世界&#xff1f;还是某种模拟器&#xff1f;点进去一看&#xff0c;发现它其实是一个用Python构建的、高度可配…...

紫光Pango EDA工具链实战:从License申请到Synplify避坑,一个FPGA工程师的踩坑笔记

紫光Pango EDA工具链实战&#xff1a;从License申请到Synplify避坑指南 第一次接触紫光Pango工具链时&#xff0c;我像大多数FPGA工程师一样&#xff0c;以为这不过是又一个需要熟悉的开发环境。直到在项目deadline前三天&#xff0c;Synplify突然报出"exit code 4"错…...

GIS国土工具实战:从地类分析到坐标转换,一站式解决项目难题

1. GIS国土工具如何解决项目痛点 第一次接触国土整治项目时&#xff0c;我被各种数据格式搞得焦头烂额。早上9点收到甲方发来的50个地块的shp文件&#xff0c;下午3点就要提交带坐标的txt报备文件&#xff0c;中间还要做地类分析和影像核对。手动操作&#xff1f;光是想到要一个…...

不止是记事本!Win10右键新建菜单终极自定义指南:排序、删除、添加任意文件类型

不止是记事本&#xff01;Win10右键新建菜单终极自定义指南&#xff1a;排序、删除、添加任意文件类型 在Windows 10的日常使用中&#xff0c;右键新建菜单可能是最容易被忽视却高频使用的功能之一。想象一下这样的场景&#xff1a;你刚刚安装了一款专业设计软件&#xff0c;却…...