- 一、 什么是瀑布流布局
- 1、是什么
- 2、特点
- 二、有什么优缺点
- 1、优点
- 2、缺点
- 三、实现方法
- 法一、【multi-column 多栏布局】
- 1、两个重要属性
- 2、特点
- 3、缺点
- 4、注意点：
- 5、实现的代码模式（以下用vue3.0来书写）
- 法二、【用flex弹性布局+计算元素高度实现布局】
- 1、原理的分析
- 2、算法思路：通过上面的分析则能了解瀑布流的思路了
- 3、代码实现思路
- 4、代码实现（以下用vue3.0来实现）
- 法三、【用插件vue-waterfall2 不是很建议使用，一般用于图片的加载，但是复杂的业务就不是很ok了】
- 1、安装依赖
- 2、引入
- 3、相关api
- 4、代码实现
- 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面
- 固定宽度，高度不一
- 岑参不齐的布局
- 以图片为主
- 节省空间：降低页面的复杂
- 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉
- 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，参差不齐，降低浏览的疲劳
- 内容总长度 无法掌握
- 数据过多时，容易造成页面 加载的负荷
- 再次加载时 很难定位上一次浏览的内容
2、特点column-count ： 定义列数
column-gap ：列与列之间的间隔
3、缺点顺序只能是 从上到下， 再左到右
4、注意点：由于排列顺序是先 从上到下， 再左到右，只能用于数据固定， 无法动态的加载追加，对于滚动到底部加载新数据则无法实现。
有时候页面会出现在前几列的最后一个元素的内容被自动断开，一部分在当前列尾，一部分在下一列的列头。这时候子元素可以用 break-inside设置为不被截断 avoid来控制
5、实现的代码模式（以下用vue3.0来书写）break-inside: avoid; // 不被截断 默认值是auto，会被截断
- template
{{index}}
- script
- style multi-column 实现
法二、【用flex弹性布局+计算元素高度实现布局】 1、原理的分析
- 适用范围：基本业务都能实现
- 首先比如有四个元素了，并且设置四列
- 那么第五个位置在哪里呢
- 答案： 是下面图的位置上，找到的位置应该高度为所有列中最小的位置
- 第六个的位置呢，答案还是和上面一样的所示 找到高度为所有列中最小的位置，则为下面的位置
- 设计要分成的列数
- 设置每列的 宽度一致
- 每次插入的位置选择所有列高度最小 的位置，依次循环
- 由于需要拿到每个数据的dom元素的实际值，则需要先对数据进行赋值，这样就可以拿到所有的元素dom上的高度
- 则渲染时候对数据的两次赋值，则会出现一次闪现，需要防抖 ，可以先将卡片设置为visibility：hidden ，当后面对数据处理完，重新渲染后再将卡片设置为visibility：visible
- 多少列则定义多少新的空数组，然后根据瀑布流的思路依次插入 到空的数组即可，最后再重新渲染页面即可
- template （例子为三列）
{{item.num}}
{{item.num}}
{{item.num}}
- js
