什么是瀑布流布局？瀑布流式布局的优缺点
瀑布流又称瀑布流式布局，是一种多列等宽不等高的一种页面布局方式。
视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局会不断加载数据并附加至当前的尾部。
是一种多列等宽不等高的一种页面布局方式，用于图片比较复杂，图片尺寸比较复杂时可以使用的一种展示方式，这种展示方式可以使页面比较美观，让人有种错落有致的感觉。
瀑布流是一种允许用户不断往下滑动，页面自动刷新呈现内容的交互形式。
瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
沉浸式可以让用户更快、更好地进入视频情境之中，而忘记真实世界的情境，因为没有其它视频信息的干扰，能够让用户只专注于当前的视频。
设置成瀑布流样式且视频浏览模式开启沉浸式浏览后，视频播放模式会以类似“抖音上下滑"的沉浸式视频浏览方式展现。
如图所示，网页上呈现参差不齐的多栏布局，图片等宽不等高，根据图片原比例缩放直至宽度达到固定的要求，每行排满后，后面的元素依次添加到其后，视觉上显得错落有致不拘一格。
瀑布流的优点
优点如下：
节省空间，外表美观，更有艺术性。
对于触屏设备非常友好，通过向上滑动浏览
用户浏览时的观赏和思维不容易被打断，留存更容易。
从体验的心理讲，女性是一种逛街数小时都不需要停歇的生物，一眼望不到头的瀑布流契合了这种心理。瀑布流的图片就像商品，就像逛街、就像扫货。女性只要不断往下拉伸页面，就像置身在一条没有尽头的购物街，没有层高限制的商场中一样
瀑布流的缺点
缺点如下：
用户无法了解内容总长度，对内容没有宏观掌控。
用户无法了解现在所处的具体位置，不知道离终点还有多远。
回溯时不容易定位到之前看到的内容。
容易造成页面加载的负荷。
容易造成用户浏览的疲劳，没有短暂的休息时间。
瀑布流的适用场景
内容以图片为主的时候，瀑布流是更好的选择。图片占用空间比较大，并且大脑理解的速度相比理解文字要快，短时间内可以扫过的内容很多，所以如果用分页显示的话用户务必会频繁的翻页，影响沉浸式的体验，而瀑布流可以解决这个问题。信息与信息之间相对独立时，瀑布流是更好的选择。如果信息关联性强，用户务必会进行大量的回溯操作去查看之前或者之后的信息，相反，如果信息相对独立的话，可以使用瀑布流，让用户同时接受来自不同地方的信息。信息与搜索匹配比较模糊时，瀑布流是更好的选择。瀑布流给人的直观印象，就是同时显示的信息与用户搜索的匹配度大致一样，而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此，当信息与搜索匹配度没有明显区分度时，可以采用瀑布流。
什么是瀑布流布局？瀑布流式布局的优缺点相关推荐
- android 搜索历史流布局,FlowLayout流式布局实现搜索清空历史记录
本文实例为大家分享了FlowLayout实现搜索清空历史记录的具体代码,供大家参考,具体内容如下 效果图:点击搜索框将搜索的历史在流式布局中展示出来,清空历史记录就会将历史清空,每次搜索后都存入sp中 ...
- 前端开发_HTML5_布局-流式布局
流式布局 1.引入 上一次课中我们讲解了表格布局,但是我们也可以看出表格布局存在着很大的局限性,那就是当页面的内容比较多的时候我们发现是无法使用表格布局实现的,那么接下来我们学习一个比较重要的布局方式 ...
- html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
- 【转】关于WaterFall瀑布流式布局的性能优化
市面上已存在的瀑布流式布局的网站: 拼范网:http://www.pinfun.com/ 迷尚网:http://www.mishang.com/ 凡客达人:http://star.vancl.com/ ...
- 瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局 原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致 直接上代 ...
- 流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录 瀑布流的定义 一.实现效果 代码 首先是用javascript自己手写代码实现照片瀑布流 使用插件Mary.js照片流插件实现照片瀑布流 总结 瀑布流的定义 瀑布流是什么? 1.琳琅满目:整 ...
- android自定义view流布局,Android控件进阶-自定义流式布局和热门标签控件
一.概述: 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧 类似的自定义换行流式布局控件.下 ...
- 自定义控件 - 流式布局（CofferFlowLayout）
自定义控件 - 流式布局(CofferFlowLayout) 先看效果图: 简介 为了方便大家理解自定义View里的一些细节点,我这里把开发者模式里的"显示布局边界"打开了.这个D ...
- RecyclerView流式布局
最近在做需求的时候,碰到有各种筛选项的界面,类似这样 这种筛选界面也比较常见,一般我们都采用RecyclerView来实现,当筛选项比较少的时候,我们选择使用线性布局来实现,当筛选项比较多,但是每个筛 ...
最新文章
- 基于struts2和hibernate的登录和注册功能——完整实例
- 【Android】Retrofit 2.0 的使用
- 高校胜负欲PK合辑，看看你的母校在拼什么？最服的还是它！
- 多人聊天室（Java）
- 比特(bit)和字节(byte)(1byte=8bit)
- MySQL is running but PID file could not be found（在macOS系统下解决方法）
- java读取文件buffered_关于Java中使用BufferedReader读取文件的疑惑
- java 中j= i_java中 i = i++和 j = i++ 的区别
- mysql long类型格式_MySQL 数据类型
- 苹果MacBook 装双系统win10蓝牙找不到的方法
- stm32中的“hello world”
- 如何安装最新版本的office(preview预览版)、更新
- 计算机之父，你知道是谁吗？
- Flutter（Dart）基础——函数详解
- 内存管理 slub算法
- 一般拓扑学--From百度（看了这个，终于明白什么是拓扑了）
- HotStuff: BFT Consensus in the Lens of Blockchain
- 冒泡排序C语言实现 - 源码详解
- RxJava进阶一（创建类操作符）
- postgre 数组类型