vue 瀑布流

废话不多说直接上代码，代码中都有注解

<template>
  <div class="waterfall-wrap">
    <div id="con" class="waterfall">
      <div
        class="category item"
        v-for="(category, categoryIndex) in cardList"
        :key="categoryIndex"
      >
        <div class="item-wrap">
          <div class="text-wrap">
            <h3 ref="carditem">
              <i class="myicon" :class="[classArray[categoryIndex]]"></i
              >{{ category.title }}
            </h3>
            <div
              class="text"
              v-for="(item, itemIndex) in category.child"
              :key="itemIndex"
              :class="{ active: currentIndex === item.id }"
              @mouseenter="mouseenter(item)"
              @mouseleave="mouseenter('')"
            >
              <span>{{ item.subTitle }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: "",
      items: [], // 项目数据
      cardList: [
        // 卡片列表数据
        // 每个卡片包含标题和子项
        {
          title: "工具器材",
          id: "1717808578252296192",
          child: [
            {
              subTitle: "2.5P手锤1把",
              id: "1717808578252296192-1717808601870422016",
            },
            {
              subTitle: "矿用照明灯",
              id: "1717808578252296192-1717808612670754816",
            },
            {
              subTitle: "一字螺丝刀（2×75毫米）",
              id: "1717808578252296192-1717808623865352192",
            },
            {
              subTitle: "一字螺丝刀（6×200毫米）",
              id: "1717808578252296192-1717808655331020800",
            },
            {
              subTitle: "十字螺丝刀（2×75毫米）",
              id: "1717808578252296192-1717808655331020801",
            },
            {
              subTitle: "十字螺丝刀（6×200毫米）",
              id: "1717808578252296192-1717808655331020802",
            },
            {
              subTitle: "活动扳手",
              id: "1717808578252296192-1717808655331020803",
            },
            {
              subTitle: "美工刀",
              id: "1717808578252296192-1717808655331020804",
            },
            {
              subTitle: "9件加长内六角扳手组套",
              id: "1717808578252296192-1717808655331020805",
            },
            {
              subTitle: "剥线钳",
              id: "1717808578252296192-1717808655331020806",
            },
            {
              subTitle: "钢丝钳",
              id: "1717808578252296192-1717808655331020807",
            },
            {
              subTitle: "斜嘴钳",
              id: "1717808578252296192-1717808655331020808",
            },
            {
              subTitle: "尖嘴钳",
              id: "1717808578252296192-1717808655331020809",
            },
            {
              subTitle: "三用网线钳",
              id: "1717808578252296192-1717808655331020810",
            },
            {
              subTitle: "水泵钳",
              id: "1717808578252296192-1717808655331020811",
            },
            {
              subTitle: "三叉套筒扳手",
              id: "1717808578252296192-1717808655331020812",
            },
            {
              subTitle: "卷尺",
              id: "1717808578252296192-1717808655331020813",
            },
            {
              subTitle: "膨胀螺丝（M12）",
              id: "1717808578252296192-1717808655331020814",
            },
            {
              subTitle: "膨胀螺丝（M10）",
              id: "1717808578252296192-1717808655331020815",
            },
            {
              subTitle: "防爆风钻",
              id: "1717808578252296192-1717808655331020816",
            },
            {
              subTitle: "断线钳（12寸 300mm）",
              id: "1717808578252296192-1717808655331020817",
            },
            {
              subTitle: "铝合金人字梯（3M）",
              id: "1717808578252296192-1717808655331020818",
            },
            {
              subTitle: "铝合金人字梯（2M）",
              id: "1717808578252296192-1717808655331020819",
            },
            {
              subTitle: "扁铲",
              id: "1717808578252296192-1717808655331020820",
            },
            {
              subTitle: "撬棍",
              id: "1717808578252296192-1717808655331020821",
            },
            {
              subTitle: "吊装带",
              id: "1717808578252296192-1717808655331020822",
            },
            {
              subTitle: "设备架",
              id: "1717808578252296192-1717808655331020823",
            },
            {
              subTitle: "电缆走向牌",
              id: "1717808578252296192-1717808655331020824",
            },
            {
              subTitle: "红光笔",
              id: "1717808578252296192-1717808655331020825",
            },
            {
              subTitle: "光缆转接头",
              id: "1717808578252296192-1717808655331020826",
            },
            {
              subTitle: "挂线架",
              id: "1717808578252296192-1717808655331020827",
            },
            {
              subTitle: "架线架",
              id: "1717808578252296192-1717808655331020828",
            },
          ],
        },
        {
          title: "材料",
          id: "1717808655331020829",
          child: [
            {
              subTitle: "螺栓松动剂",
              id: "1717808655331020829-1717808655331020830",
            },
            {
              subTitle: "绑扎带（8*300mm）",
              id: "1717808655331020829-1717808655331020831",
            },
            {
              subTitle: "绑扎带（10*650mm）",
              id: "1717808655331020829-1717808655331020832",
            },
            {
              subTitle: "煤矿用层绞式单模阻燃通信光缆",
              id: "1717808655331020829-1717808655331020833",
            },
            {
              subTitle: "矿用通信电缆 MHYVP 10×2×1/0.97",
              id: "1717808655331020829-1717808655331020834",
            },
            {
              subTitle: "矿用通信电缆 MHYVP 5×2×1/0.97 ",
              id: "1717808655331020829-1717808655331020835",
            },
            {
              subTitle: "矿用通信电缆 MHYVP 1×4×1/0.97 ",
              id: "1717808655331020829-1717808655331020836",
            },
            {
              subTitle: "矿用通信电缆 MHYVP 1×2×7/0.43",
              id: "1717808655331020829-1717808655331020837",
            },
            {
              subTitle: "煤矿用层绞式单模阻燃通信光缆 MGTSV 24B",
              id: "1717808655331020829-1717808655331020838",
            },
            {
              subTitle: "煤矿用层绞式单模阻燃通信光缆 MGTSV 48B",
              id: "1717808655331020829-1717808655331020839",
            },
            {
              subTitle: "煤矿用层绞式单模阻燃通信光缆 MGTSV 12B",
              id: "1717808655331020829-1717808655331020840",
            },
            {
              subTitle: "矿用控制电缆 MKVVR 450/750 3×2.5mm2",
              id: "1717808655331020829-1717808655331020841",
            },
            {
              subTitle: "矿用控制电缆 MHYV4 4×2×0.5mm3",
              id: "1717808655331020829-1717808655331020842",
            },
            {
              subTitle: "矿用本安电路用接线盒",
              id: "1717808655331020829-1717808655331020843",
            },
            {
              subTitle: "隔爆接线盒",
              id: "1717808655331020829-1717808655331020844",
            },
            {
              subTitle: "尾纤 FC-SC类型",
              id: "1717808655331020829-1717808655331020845",
            },
            {
              subTitle: "尾纤 FC-FC类型",
              id: "1717808655331020829-1717808655331020846",
            },
            {
              subTitle: "尾纤 SC-SC类型",
              id: "1717808655331020829-1717808655331020847",
            },
            {
              subTitle: "尾纤 SC-LC类型",
              id: "1717808655331020829-1717808655331020848",
            },
            {
              subTitle: "尾纤 LC-LC类型",
              id: "1717808655331020829-1717808655331020849",
            },
            {
              subTitle: "防爆密封圈",
              id: "1717808655331020829-1717808655331020850",
            },
            {
              subTitle: "电话线专用水晶头（五类）",
              id: "1717808655331020829-1717808655331020851",
            },
            {
              subTitle: "电话线专用水晶头（六类）",
              id: "1717808655331020829-1717808655331020852",
            },
            {
              subTitle: "网线专用水晶头（超五类）",
              id: "1717808655331020829-1717808655331020853",
            },
            {
              subTitle: "网线专用水晶头（六类）",
              id: "1717808655331020829-1717808655331020854",
            },
            {
              subTitle: "扁铜线",
              id: "1717808655331020829-1717808655331020855",
            },
            {
              subTitle: "润滑剂",
              id: "1717808655331020829-1717808655331020856",
            },
            {
              subTitle: "干燥剂",
              id: "1717808655331020829-1717808655331020857",
            },
            {
              subTitle: "光缆接续盒",
              id: "1717808655331020829-1717808655331020858",
            },
            {
              subTitle: "挡圈/挡板",
              id: "1717808655331020829-1717808655331020859",
            },
            {
              subTitle: "防爆尾纤",
              id: "1717808655331020829-1717808655331020860",
            },
            {
              subTitle: "法兰",
              id: "1717808655331020829-1717808655331020861",
            },
          ],
        },
        {
          title: "调试或测试工具",
          id: "1717808655331020862",
          child: [
            {
              subTitle: "光纤熔接机",
              id: "1717808655331020862-1717808655331020863",
            },
            {
              subTitle: "线鼻",
              id: "1717808655331020862-1717808655331020864",
            },
            {
              subTitle: "查话机",
              id: "1717808655331020862-1717808655331020865",
            },
            {
              subTitle: "工程宝",
              id: "1717808655331020862-1717808655331020866",
            },
            {
              subTitle: "光功率计",
              id: "1717808655331020862-1717808655331020867",
            },
            {
              subTitle: "数字万用表",
              id: "1717808655331020862-1717808655331020868",
            },
          ],
        },
        {
          title: "车辆",
          id: "1717808655331020869",
          child: [
            {
              subTitle: "矿用防爆无轨胶轮车",
              id: "1717808655331020869-1717808655331020870",
            },
            {
              subTitle: "特种防爆车",
              id: "1717808655331020869-1717808655331020871",
            },
            {
              subTitle: "防爆工具车",
              id: "1717808655331020869-1717808655331020872",
            },
          ],
        },
        {
          title: "防护用品",
          id: "1717808655331020873",
          child: [
            {
              subTitle: "工作服",
              id: "1717808655331020873-1717808655331020874",
            },
            {
              subTitle: "安全帽",
              id: "1717808655331020873-1717808655331020875",
            },
            {
              subTitle: "自救灯",
              id: "1717808655331020873-1717808655331020876",
            },
            {
              subTitle: "矿灯",
              id: "1717808655331020873-1717808655331020877",
            },
            {
              subTitle: "防尘口罩",
              id: "1717808655331020873-1717808655331020878",
            },
            {
              subTitle: "手套",
              id: "1717808655331020873-1717808655331020879",
            },
            {
              subTitle: "五点式安全绳",
              id: "1717808655331020873-1717808655331020880",
            },
            {
              subTitle: "安全警示灯",
              id: "1717808655331020873-1717808655331020881",
            },
            {
              subTitle: "防砸鞋",
              id: "1717808655331020873-1717808655331020882",
            },
          ],
        },
        {
          title: "人员配备",
          id: "1717808655331020883",
          child: [
            {
              subTitle: "安装回撤工",
              id: "1717808655331020883-1717808655331020884",
            },
            {
              subTitle: "双排车司机",
              id: "1717808655331020883-1717808655331020885",
            },
            {
              subTitle: "运维工程师",
              id: "1717808655331020883-1717808655331020886",
            },
            {
              subTitle: "电工",
              id: "1717808655331020883-1717808655331020887",
            },
            {
              subTitle: "钻孔工",
              id: "1717808655331020883-1717808655331020888",
            },
            {
              subTitle: "焊工",
              id: "1717808655331020883-1717808655331020889",
            },
            {
              subTitle: "普工",
              id: "1717808655331020883-1717808655331020890",
            },
          ],
        },
        {
          title: "设备",
          id: "1717808655331020891",
          child: [
            {
              subTitle: "4G基站",
              id: "1717808655331020891-1717808655331020892",
            },
            {
              subTitle: "5G基站",
              id: "1717808655331020891-1717808655331020893",
            },
            {
              subTitle: "调度电话",
              id: "1717808655331020891-1717808655331020894",
            },
            {
              subTitle: "AI智能摄像头",
              id: "1717808655331020891-1717808655331020895",
            },
            {
              subTitle: "工作面智控中心",
              id: "1717808655331020891-1717808655331020896",
            },
            {
              subTitle: "煤机中继",
              id: "1717808655331020891-1717808655331020897",
            },
            {
              subTitle: "矿用本安型摄像仪",
              id: "1717808655331020891-1717808655331020898",
            },
            {
              subTitle: "工作面网络通讯设备",
              id: "1717808655331020891-1717808655331020899",
            },
          ],
        },
        {
          title: "系统",
          id: "1717808655331020900",
          child: [
            {
              subTitle: "工作面应急广播系统",
              id: "1717808655331020900-1717808655331020901",
            },
            {
              subTitle: "工作面有线通讯系统",
              id: "1717808655331020900-1717808655331020902",
            },
            {
              subTitle: "工作面无线通讯系统",
              id: "1717808655331020900-1717808655331020903",
            },
            {
              subTitle: "工作面智能控制系统",
              id: "1717808655331020900-1717808655331020904",
            },
            {
              subTitle: "工作面视频监控系统",
              id: "1717808655331020900-1717808655331020905",
            },
            {
              subTitle: "工作面人员定位系统",
              id: "1717808655331020900-1717808655331020906",
            },
          ],
        },
        {
          title: "通用运维工具包",
          id: "1717808655331020907",
          child: [
            {
              subTitle: "一字螺丝刀（2×75毫米）",
              id: "1717808655331020907-1717808655331020908",
            },
            {
              subTitle: "一字螺丝刀（6×200毫米）",
              id: "1717808655331020907-1717808655331020909",
            },
            {
              subTitle: "十字螺丝刀（2×75毫米）",
              id: "1717808655331020907-1717808655331020910",
            },
            {
              subTitle: "十字螺丝刀（6×200毫米）",
              id: "1717808655331020907-1717808655331020911",
            },
            {
              subTitle: "活动扳手",
              id: "1717808655331020907-1717808655331020912",
            },
            {
              subTitle: "美工刀",
              id: "1717808655331020907-1717808655331020913",
            },
            {
              subTitle: "9件加长内六角扳手组套",
              id: "1717808655331020907-1717808655331020914",
            },
            {
              subTitle: "剥线钳",
              id: "1717808655331020907-1717808655331020915",
            },
            {
              subTitle: "斜嘴钳",
              id: "1717808655331020907-1717808655331020916",
            },
            {
              subTitle: "三用网线钳",
              id: "1717808655331020907-1717808655331020917",
            },
            {
              subTitle: "水泵钳",
              id: "1717808655331020907-1717808655331020918",
            },
            {
              subTitle: "三叉套筒扳手",
              id: "1717808655331020907-1717808655331020919",
            },
            {
              subTitle: "绑扎带（8*300mm）",
              id: "1717808655331020907-1717808655331020920",
            },
            {
              subTitle: "绑扎带（10*650mm）",
              id: "1717808655331020907-1717808655331020921",
            },
            {
              subTitle: "防爆密封圈",
              id: "1717808655331020907-1717808655331020922",
            },
            {
              subTitle: "网线专用水晶头",
              id: "1717808655331020907-1717808655331020923",
            },
            {
              subTitle: "挡圈/挡板",
              id: "1717808655331020907-1717808655331020924",
            },
            {
              subTitle: "螺栓松动剂",
              id: "1717808655331020907-1717808655331020925",
            },
          ],
        },
        {
          title: "通用劳保套件",
          id: "1717808655331020926",
          child: [
            {
              subTitle: "工作服",
              id: "1717808655331020926-1717808655331020927",
            },
            {
              subTitle: "安全帽",
              id: "1717808655331020926-1717808655331020928",
            },
            {
              subTitle: "自救器",
              id: "1717808655331020926-1717808655331020929",
            },
            {
              subTitle: "矿灯",
              id: "1717808655331020926-1717808655331020930",
            },
            {
              subTitle: "防尘口罩",
              id: "1717808655331020926-1717808655331020931",
            },
            {
              subTitle: "手套",
              id: "1717808655331020926-1717808655331020932",
            },
            {
              subTitle: "安全警示灯",
              id: "1717808655331020926-1717808655331020933",
            },
            {
              subTitle: "防砸鞋",
              id: "1717808655331020926-1717808655331020934",
            },
          ],
        },
      ],
      classArray: [
        // 图标样式类数组
        "el-icon-paperclip",
        "el-icon-reading",
        "el-icon-news",
        "el-icon-cpu",
        "el-icon-present",
        "el-icon-paperclip",
        "el-icon-reading",
        "el-icon-news",
        "el-icon-cpu",
        "el-icon-present",
      ],
    };
  },
  mounted() {
    // 动态生成颜色
    let Elements = this.$refs.carditem; // 获取名为 "carditem" 的引用元素并存储在 Elements 中
    this.random(Elements); // 调用 random 方法，将 Elements 传递为参数

    this.$nextTick(() => {
      window.addEventListener("resize", this.waterFall); // 在下一个 DOM 渲染周期后，监听窗口的大小变化事件，并调用 waterFall 方法
      this.waterFall(); // 调用 waterFall 方法，用于处理瀑布流布局
    });
  },
  methods: {
    // 动态生成颜色
    random(Elements) {
      // 随机设置元素的颜色
      let arr = [
        "#0d79f3",
        "#0bafff",
        "#0fd464",
        "#ffe203",
        "#ff754e",
        "#10d4ff",
        "#8971f5",
        "#c229f7",
        "#00d0b7",
        "#76d400",
      ]; // 颜色数组
      let arrs = [
        "#333",
        "#333",
        "#333",
        "#333",
        "#333",
        "#333",
        "#333",
        "#333",
        "#333",
        "#333",
      ]; // 文本颜色数组
      let num = 0; // 初始化颜色数组的索引

      for (let index = 0; index < Elements.length; index++) {
        let colorArr = arr[num]; // 获取背景颜色
        let colorArrs = arrs[num]; // 获取文本颜色
        let r = Math.round(Math.random() * 255); // 随机生成红色分量
        let g = Math.round(Math.random() * 255); // 随机生成绿色分量
        let b = Math.round(Math.random() * 255); // 随机生成蓝色分量
        let element = Elements[index]; // 获取当前元素
        element.style.color = colorArrs; // 设置文本颜色
        element.style.borderTopColor = colorArr; // 设置元素顶部边框颜色
        num++;
        num = num > 9 ? 0 : num; // 循环使用颜色数组
      }
    },
    mouseenter(items) {
      // 鼠标移入
      this.currentIndex = items.id;
    },
    waterFall() {
      // 核心计算瀑布流布局
      let container = document.getElementById("con"); // 获取瀑布流容器
      let itemElements = container.querySelectorAll(".item"); // 获取所有子元素
      let width = itemElements[0].offsetWidth; // 获取第一个子元素的宽度
      let clientWidth = document.documentElement.clientWidth; // 获取可见区域的宽度
      let columnCount = Math.floor(clientWidth / width); // 计算列数
      container.style.width = columnCount * width + "px"; // 设置容器的宽度，以适应列数

      let columnHeights = new Array(columnCount).fill(0); // 创建一个数组来存储每列的高度

      for (let i = 0; i < itemElements.length; i++) {
        if (i < columnCount) {
          // 如果是第一行
          itemElements[i].style.top = "0px"; // 设置top值为0
          itemElements[i].style.left = i * width + "px"; // 设置left值为列的偏移
          columnHeights[i] = itemElements[i].offsetHeight; // 更新第一行每列的高度
        } else {
          // 如果不是第一行
          let minColumnHeight = Math.min(...columnHeights); // 找到最小的列高度
          let columnIndex = columnHeights.indexOf(minColumnHeight); // 找到最小高度列的索引
          itemElements[i].style.top = minColumnHeight + "px"; // 设置top值为最小列的高度
          itemElements[i].style.left = columnIndex * width + "px"; // 设置left值为最小列的偏移
          columnHeights[columnIndex] += itemElements[i].offsetHeight; // 更新最小列的高度
        }
      }
    },
  },
};
</script>
<style lang="scss">
.waterfall-wrap {
  padding: 10px; /* 设置内边距为 10 像素 */
  height: calc(100% - 20px); /* 高度为父容器高度减去 20 像素 */
  padding-right: 0; /* 右内边距为 0 */
  width: calc(
    100% - 10px
  ) !important; /* 宽度为父容器宽度减去 10 像素，使用 !important 来覆盖其他样式 */
  overflow-y: auto; /* 垂直方向出现滚动条时显示滚动条 */
  overflow-x: hidden; /* 隐藏水平方向的滚动条 */
}

.active {
  color: #0d79f3; /* 设置文本颜色为 #0d79f3 */
  .del-wrap {
    display: block; /* 显示 .del-wrap 元素 */
  }
}

.waterfall {
  position: relative; /* 设置相对定位 */
  height: 100%; /* 高度为父容器高度的百分之百 */
}

.item {
  width: calc(100% / 5); /* 宽度为父容器宽度的五分之一 */
  height: auto; /* 高度自适应内容 */
  position: absolute; /* 设置绝对定位 */

  .item-wrap {
    width: calc(100% - 0px); /* 宽度为父容器宽度减去 0 像素 */

    .text-wrap {
      background: #fff; /* 设置背景颜色为白色 */
      box-shadow: 0px 0px 4px rgba(67, 84, 95, 0.45); /* 添加阴影效果 */
      margin: 5px; /* 设置外边距为 5 像素 */
      box-sizing: border-box; /* 设置盒子模型为边框盒模型 */
      border-radius: 6px; /* 设置边框圆角为 6 像素 */

      div:last-child {
        padding-bottom: 10px; /* 设置最后一个子元素的下内边距为 10 像素 */
      }
    }

    h3 {
      border-top: 3px solid red; /* 设置上边框为 3 像素宽的红色边框 */
      padding: 10px 0 0 10px; /* 设置内边距 */
      border-radius: 6px; /* 设置边框圆角为 6 像素 */

      i {
        margin-right: 10px; /* 设置右外边距为 10 像素 */
      }
    }

    .text {
      padding-left: 10px; /* 设置左内边距为 10 像素 */
      width: calc(100% - 10px); /* 宽度为父容器宽度减去 10 像素 */
      cursor: pointer; /* 设置光标为手型 */
      margin-top: 10px; /* 设置上外边距为 10 像素 */
      position: initial; /* 恢复默认定位属性 */
      height: auto; /* 高度自适应内容 */
    }
  }
}
</style>

效果展示