uniapp 瀑布流插件 maramlee-waterfalls-flow 详解

石榴熟了

maramlee-waterfalls-flow 使用

前言
waterfalls-flow 是一个瀑布流插件。

前段时间做项目中需要使用到瀑布流，但找了一圈，都没有找到合适的瀑布流插件，很多都是直接通过标签分列，治标不治本。

所以自己动手写了这个插件，可以配置多列（默认 2 列，最少 2 列，不考虑性能或其他，按理讲最多可以无限多）。适用于 h5 端和 app 端，其他端没测试，可以自行测试，按道理来说是没问题的。

如果你和我一样，不想写 nvue，不能直接使用官网提供的 waterfall 插件，请自行去 瀑布流 app、h5通用插件 https://ext.dcloud.net.cn/plugin?id=2714 下载使用。
使用方式
在 script 中引用组件

import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
export default {
  components: { waterfallsFlow },
};

在 template 中使用组件

<template>
  <waterfallsFlow :list="list">
    <template v-slot:default="item">
      <!-- 此处添加插槽内容 -->
    </template>
  </waterfallsFlow>
</template>



使用样例
pages/index/index.vue

<template>
  <view class="content">
    <waterfallsFlow :list="list">
      <template v-slot:default="item">
        <view class="cnt">
          <view class="title">{{ item.title }}</view>
          <view class="text">{{ item.text }}</view>
        </view>
      </template>
    </waterfallsFlow>
  </view>
</template>

<script>
  import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
  export default {
    components: { waterfallsFlow },
    data() {
      return {
        title: "Hello",
        list: [
          {
            id: 1,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475741266&di=e36d6c01c93320e2ba1504d8357248f4&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg",
            title: "可爱的小猫咪呀",
            text:
              "小小的猫咪，甚是呆萌，呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌",
          },
          {
            id: 2,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475934834&di=7a37b8d628252c4aced6ed0decba9442&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F43%2F74%2F01300000164151121808741085971.jpg",
            title: "迪士尼动画",
            text: "迪士尼动画之……",
          },
          {
            id: 3,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476083909&di=a5debff35edec5de105bc105d6fdbce3&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F77%2F77%2F01300000336597125202779973172.jpg",
            title: "火箭",
            text: "火箭升空瞬间，宏伟壮观啊",
          },
          {
            id: 5,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476129760&di=7a3db0b14f6a74240bbfa7922ba22f45&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F82%2F55%2F01300000349330124003555691086.jpg",
            title: "华佗",
            text: "华佗人物画像 中国画 线条画 毛笔画 彩色画",
          },
          {
            id: 6,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476215687&di=97c2bbf6f3a1a3e2a6a2dc77dfe4bea7&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F72%2F82%2F19300000009075130804824786610.jpg",
            title: "恐龙",
            text: "恐龙来啦",
          },
          {
            id: 7,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476258176&di=29622b0f0cfd659aecebabaae352d02c&imgtype=0&src=http%3A%2F%2F1882.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2011%2F3%2F25%2F13%2F13%2Fu48513077_12fa4ba953ag213.jpg",
            title: "手",
            text: "什么？",
          },
          {
            id: 8,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476300222&di=49712f992d8f7bbb1a5851eced71cbe2&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F71%2F56%2F16300000988660128426569668958.jpg",
            title: "百年好合",
            text: "百年好合 结婚 庚帖 二次元",
          },
          {
            id: 9,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476416001&di=ea1a1f8f9b1274d39c05af3e48041e6a&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12420002963%2F641",
            title: "5G",
            text: "5G 来啦",
          },
          {
            id: 10,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476497015&di=2dfa9a6ec465d7330bc0b4433d63cd9e&imgtype=0&src=http%3A%2F%2Fimgo.zjjjtg.com%2Fimg2020%2F9%2F4%2F10%2F2020090410315179234.jpg",
            title: "LEVEL 2",
            text: "LEVEL 2",
          },
          {
            id: 12,
            image_url:
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476567983&di=040976a1cd1a6e5510a237c57bdcff06&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F12421051168%2F641",
            title: "王者荣耀",
            text: "王者荣耀 龙 快来打龙 请求集合",
          },
        ],
      };
    },
  };
</script>
<style>
  page {
    background-color: #eee;
  }
</style>
<style lang="scss" scoped>
  .content {
    padding: 10px;
    .cnt {
      padding: 10px;
      .title {
        font-size: 16px;
      }
      .text {
        font-size: 14px;
        margin-top: 5px;
      }
    }
  }
</style>


实现思路
和一般的 js 瀑布流实现方式差不多，但也有差别（如果还是以操作 dom 的方式思维的小伙儿，请认真理解 vue 数据引起视图变）：

1 用最外层 view.waterfalls-box 元素包裹所有项（view.waterfalls-list），外层元素设置 css 相对定位，以便内部元素绝对定位；
2 由于内部项绝对定位，不在文档流中，需要设置外层 view 高度 height 撑起内部元素显示区域，以便不影响可能的下面进一步布局，此高度需根据计算设置。
3 给图片 load、error 事件添加 imageLoadHandle 方法。这里说明下，如果不是在图片这两个事件里添加，就不能很好的确定是否已经加载完成，说用 setTimeout 的小伙伴儿，请绕行好么？
4 获取节点信息，设置定位信息。
5 如果不考虑排版顺序，图片谁先加载完成便显示谁的话，可以直接在此时，直接通过计算，定位就行了（显然不符合此插件的气质）。
6 如果必须要按照 list 本来的顺序渲染数据，则必须要等所有图片渲染成功或失败之后，再统一计算位置，所以，此时需要添加一个 num 值记录已经渲染的图片个数，确认渲染完成后再一次计算位置。
7 由于数据一般都是从后台获取后再渲染，加载一次渲染一次，vue key 的存在，只会渲染有变化的数据，所以需图片加载也需处理优化。

wjsxhnia

煞老尸

唐山祥子

学习了,要是有字体格式就帅了,这么看枯燥了些.分享不错

chuanye

get了  学下一下