android中的瀑布流 瀑布流 vue

vue环境简单实现动态瀑布流效果

最近开发项目需要实现动态瀑布流效果，项目本身是vue环境，网上很难找到类似的效果，vue-waterfall插件，懂的都懂。看了源码就知道不符合我项目目前的场景。（列表是循环渲染，高度不能提前预知也不能提前获取到，因此该组件是用不了的。—看了waterfall组件示例源码的小伙伴应该清楚）。

除了waterfall，其次就是用原生js写了。但是我不想用原生js写在vue项目中，过于冗长且不便维护。于是结合目前的情况我给出一个方案：

tips：我们项目导致瀑布流的主要原因只是描述文本的行数。最多两行，最少一行~~(见下图左右文本区别)，每个item之间相差的高度仅仅只是一行文本的高度

1、分成左右两个大列表
2、请求回来的数据分别左右分给这两个列表 （主要用到：mod % 取余 判断余数为0 或1）
3、在上面的基础上把每次请求回来的数据的最后一个数据不分配，判断左右列表的高度，分配给高度较低的那一个

第三步主要是为了保证左右两边高度差变小

tips：我们项目导致瀑布流的主要原因只是描述文本的行数。最多两行，最少一行~~，每个item之间相差的高度仅仅只是一行文本的高度。（有类似需求的小伙伴完全可以用此方式来实现瀑布流，节省性能，更高效，上拉加载一次，获取一次左右高度即可!!!)

下一步：
上代码 html

<!-- 视频内容 -->
        <div class="video_lists">
          <div class="mini-video-list1" ref='video_left'>
            <mini-video-content
              v-for="(miniVideo, index) in miniVideoLeftList"
              :key="index"
              :miniVideo="miniVideo"
              :index="index"
            ></mini-video-content>
          </div>
          <div class="mini-video-list2" ref='video_right'>
            <mini-video-content
              v-for="(miniVideo, index) in miniVideoRightList"
              :key="index"
              :miniVideo="miniVideo"
              :index="index"
            ></mini-video-content>
          </div>
        </div>

js：

获取左边视频盒子高度

this.$refs.video_left.offsetHeight

请求数据回来之后的操作（每次上拉加载请求回来的数据是10条，加载全部的最后一次除外）

if (res.result) {
          if (res.result.resultList && res.result.resultList.length) {
            //  除去返回数据的最后一条  % 2 = 0 放左边  =1放右边
            let miniVideonewLeftList = res.result.resultList.filter(
              (_, index) => {
                if (index < res.result.resultList.length - 1) { //除去返回数据的最后一条
                  return index % 2 === 0;
                }
              }
            );
            let miniVideonewRightList = res.result.resultList.filter(
              (_, index) => {
                if (index < res.result.resultList.length - 1) {//除去返回数据的最后一条
                  return index % 2 === 1;
                }
              }
            ); 
            //先把除了最后一个数据项的赋值过去
            this.miniVideoLeftList.push(...miniVideonewLeftList);
            this.miniVideoRightList.push(...miniVideonewRightList);
             //判断 左边的高度 和右边的高度  哪个矮吧最后一项放在哪边
            if (
              this.$refs.video_left &&
              this.$refs.video_left.offsetHeight <= this.$refs.video_right &&
              this.$refs.video_right.offsetHeight
            ) {
              this.miniVideoLeftList.push(
                res.result.resultList[res.result.resultList.length - 1]
              );
            } else {
              this.miniVideoRightList.push(
                res.result.resultList[res.result.resultList.length - 1]
              );
            }

完成~

实测完全ok ~ 10个列表项纠正一下高度差完全ok、
如果你的项目item也是高度差不大（比如我的就差一行文本而已），就可以用这个方式。
希望可以帮助到你们~