更新记录

1.0.1（2024-04-16） 下载此版本

优化高度响应，增加图片单独配置的组件，提高性能。

1.0.0（2024-03-28） 下载此版本

瀑布流 初始版本

平台兼容性

uni-app

其他

k-waterfall-flow 瀑布流

注意：

1. 在图片加载成功需要通知父级更新
2. 由于图片从服务器加载后需要解析、绘制等步骤，有一定耗时，所以需要通过 k-waterfall-flow-image 来进行处理图片
3. 同一时间渲染的子级不能过多，否则可能导致排版位置异常

测试环境

1. 谷歌浏览器（122.0.6261.112（正式版本） （64 位））
2. 微信小程序（调试基础库：3.3.3）
3. 小米11手机

• 组件 k-waterfall-flow

• 组件 k-waterfall-flow-item

• 组件 k-waterfall-flow-image

示例：

<template>
  <view style="height: 50vh;padding: 0px;">
    <k-scroll @loadmore="loadMore" @refresh="refresh">
      <k-waterfall-flow :column="3" :vertical="10" :horizontal="10" :image_time="100">
        <k-waterfall-flow-item :_key="item" v-for="item in size" :key="item">
          <template v-slot:default="{callback}">
            <view class="k-waterfall-flow-item">
              {{item}}
              <k-waterfall-flow-image lazy-load @load="callback" v-if="item % 6 == 0"
                                      src="https://pic.huke88.com/video/cover/2021-01-11/09A43DD5-CDF7-A95D-5E5A-64D76E2020EB.jpg!/fwfh/1840x1124/quality/80/unsharp/true/format/jpg"
                                      mode="widthFix"></k-waterfall-flow-image>
              <k-waterfall-flow-image lazy-load @load="callback" class="aaa" v-if="item % 6 == 1"
                                      src="/static/1.png" mode="widthFix"></k-waterfall-flow-image>
              <k-waterfall-flow-image lazy-load @load="callback" v-if="item % 6 == 2" src="/static/2.png"
                                      mode="widthFix">
              </k-waterfall-flow-image>
              <k-waterfall-flow-image lazy-load @load="callback" v-if="item % 6 == 3" src="/static/3.jpg"
                                      mode="widthFix">
              </k-waterfall-flow-image>
              <k-waterfall-flow-image lazy-load @load="callback" v-if="item % 6 == 4" src="/static/4.jpg"
                                      mode="widthFix">
              </k-waterfall-flow-image>
              <k-waterfall-flow-image lazy-load @load="callback" v-if="item % 6 == 5" src="/static/5.png"
                                      mode="widthFix">
              </k-waterfall-flow-image>
            </view>
          </template>
        </k-waterfall-flow-item>
      </k-waterfall-flow>
    </k-scroll>
  </view>
</template>

<script>
  import {
    nextTick
  } from 'vue';

  const _size = 20;
  export default {
    data() {
      return {
        size: _size,
      }
    },
    methods: {
      refresh(next) {
        this.size = _size;
        setTimeout(() => {
          next();
        }, 500)
      },
      loadMore(next) {
        this.size += _size;
        if (this.size > _size * 100) {
          return;
        }
        setTimeout(() => {
          next();
        }, 500)
      }
    }
  }
</script>

<style scoped lang="scss">
  .k-waterfall-flow-item-box {
    .k-waterfall-flow-item {
      width: 100%;
    }
  }

  image {
    width: 100%;
    height: 0;
  }

  button {
    position: sticky;
    left: 0;
    top: 0;
    bottom: 0;
  }

  k-button {
    position: relative;
    z-index: 111;
  }
</style>