瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容 动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余 的间距差存大。
实现瀑布流的解决方案，可以使用 CSS3 布局来实现，也可以使用 JS 脚本来实现，使用 CSS3 实现 代码如下：
使用 CSS3 实现瀑布流布局，性能高于js，jq，缺点是用户体验差，比如：移除数据、更新数据会 造成整个页面结构的复杂变化，让用户突然失去焦点的感觉非常不友好！所以使用 js 实现优势也 是比较明显的，我们这里使用 uViewUI 的瀑布流插件来实现
PS ：swiper 实现 滑动切换页面的效果需要设置一个固定的高度值，但是咱们瀑布流的高度是未
知的，那么该怎么办呢？iViewUI 中的 u-waterfall 源码分析，我们要通过全局事件设置的方式来
动态的设置 高度，同时，咱们这个定制化的 u-waterfall 需要单独再拿出来进行使用，拓展咱们定
制化的插件
- 在 uViewUI 中创建一个自定义使用的 u-waterfall-sns.vue 插件，主要分为三步：
在 uViewUI 组件库 components 中找到 u-waterfall 文件，复制一份命名为uwaterfall-sns
文件内 u-waterfall.vue 插件，复制一份命名为u-waterfall-sns.vue 插件
u-waterfall-sns.vue 插件内，name 属性更改为 u-waterfall-sns，就可以调用咱们拓展
出来的插件了 - 使用 uni.$on 设置全局事件，在 u-waterfall-sns.vue 插件内部瀑布流渲染完毕后触发这个事
件，动态修改首页轮播切换页面内的 swiper 高度
- 设置 image 组件的 mode 属性为 widthFil ，让动态瀑布流错落有致的状态更友好
若有收获，就点个赞吧
0 人点赞
