vuux/dist/es/Waterfall/src/hook/useWaterfall.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as d, computed as f, watch as z, onMounted as M, onUnmounted as W } from "vue";
import { Utils as p } from "@vuux/utils";
const O = (c, a) => {
  const t = d([]), o = d([]), h = d(!0), u = f(() => c.column), r = f(() => c.gap), g = () => {
    o.value = new Array(u.value).fill(0);
  }, x = () => {
    a.value && (t.value = Array.from(a.value.querySelectorAll(c.item)));
  }, i = p.debounce(() => {
    if (typeof window > "u" || !a.value)
      return;
    g();
    const e = a.value.clientWidth, n = Math.floor((e - (u.value - 1) * r.value) / u.value);
    for (let v = 0; v < t.value.length; v++) {
      const s = t.value[v];
      if (!s)
        continue;
      s.style.width = `${n}px`;
      const b = Math.min(...o.value), m = o.value.indexOf(b), w = m * (n + r.value), H = o.value[m];
      s.style.position = "absolute", s.style.transition = "transform 0.3s ease", s.style.transform = `translate(${w}px, ${H}px)`, o.value[m] += s.offsetHeight + r.value;
    }
    h.value = !1;
  }, 50), y = f(() => {
    const e = Math.max(...o.value);
    return {
      height: e ? `${e}px` : "100%",
      position: "relative"
    };
  });
  z(u, () => {
    g(), i();
  });
  let l = null;
  return M(() => {
    x(), i(), l = new ResizeObserver(
      p.debounce(() => {
        i();
      }, 100)
    );
    for (let e = 0; e < t.value.length; e++) {
      const n = t.value[e];
      n && l.observe(n);
    }
    window.addEventListener("resize", i);
  }), W(() => {
    if (l) {
      for (let e = 0; e < t.value.length; e++) {
        const n = t.value[e];
        n && l.unobserve(n);
      }
      l.disconnect(), l = null;
    }
    window.removeEventListener("resize", i);
  }), {
    items: t,
    columnHeights: o,
    loading: h,
    column: u,
    gap: r,
    containerStyle: y,
    calculatePositions: i
  };
};
export {
  O as useWaterfall
};