comic-plus/lib/components/waterfall/src/main.js

<p align="center"> <img width="200px" src="./logo.png"/> </p>

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/waterfall.css");
require("../../../utils/config.js");
const tools = require("../../../utils/tools.js");
const dom = require("../../../utils/dom.js");
require("@vueuse/core");
const main_props = require("./main.props.js");
const type = require("./type.js");
const resize = require("../../../hooks/resize.js");
const findIndexOfMinOrMax = (arr, flag) => {
  if (arr.length === 0) {
    return -1;
  }
  let flagValue;
  {
    flagValue = Math.min(...arr);
  }
  const index = arr.indexOf(flagValue);
  return index;
};
const Waterfall = vue.defineComponent({
  name: "CuWaterfall",
  props: main_props.waterfallProps,
  emits: main_props.waterfallEmits,
  setup(props, { slots, emit }) {
    const waterfallRef = vue.ref(null);
    const containerWidth = vue.ref(0);
    const dFc = tools.debounce(setWaterfallStyle, 300);
    function setWaterfallStyle() {
      if (!waterfallRef.value || !containerWidth.value) return;
      let colNum;
      if (props.colWidth) {
        colNum = Math.floor((containerWidth.value + props.gutter) / (props.colWidth + props.gutter));
        colNum = Math.min(colNum, waterfallRef.value.children.length);
      } else {
        colNum = props.col;
      }
      let childrenList = new Array(colNum).fill(0);
      let list = Array.from(waterfallRef.value.children).filter(
        //防犊子  防止某些傻逼不使用item组件
        (el) => el.classList.value.indexOf("cu-waterfall-item") >= 0
      );
      list.forEach((item) => {
        let itemRect = item.getBoundingClientRect();
        let maxIdx = findIndexOfMinOrMax(childrenList);
        let w = (containerWidth.value - props.gutter * (colNum - 1)) / colNum;
        let x = maxIdx * w + maxIdx * props.gutter;
        let y = childrenList[maxIdx];
        item.style.setProperty("width", w + "px");
        item.style.setProperty("transform", `translate3d(${x}px,${y}px,0px)`);
        item.style.setProperty("visibility", "visible");
        item.setAttribute("data-show", "show");
        addAnimation(item);
        childrenList[maxIdx] += itemRect.height + props.gutter;
      });
      waterfallRef.value.style.setProperty("height", Math.max(...childrenList) - props.gutter + "px");
      emit("update");
    }
    function addAnimation(el) {
      if (el.classList.value.indexOf("loaded") >= 0) return;
      dom.addClass(el, "loaded");
      if (props.fadeIn) dom.addClass(el, "fadeIn");
      setTimeout(() => {
        dom.removeClass(el, "fadeIn");
        el.style.setProperty("transition", "transform 300ms");
      }, 500);
    }
    resize.useResize(waterfallRef, (rect) => {
      containerWidth.value = rect.width;
      dFc();
    });
    vue.provide(type.WATERFALL_PROVIDE, {
      updateStyle: dFc
    });
    vue.onMounted(() => {
      containerWidth.value = waterfallRef.value.getBoundingClientRect().width;
      setWaterfallStyle();
    });
    vue.onUpdated(dFc);
    return () => {
      return vue.h("div", { class: "cu-waterfall", ref: waterfallRef }, slots);
    };
  }
});
exports.default = Waterfall;