tudou-waterfall 0.1.15 → 0.1.16

package/dist/index.cjs

@@ -8,8 +8,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     cols: { default: 0 },
     gap: { default: 15 },
     estimatedHeight: { default: 220 },
-    templateType: {},
-    overscan: { default: 600 }
+    overscan: { default: 600 },
+    breakpoints: { default: () => [
+      { minWidth: 1400, cols: 9 },
+      { minWidth: 1200, cols: 8 },
+      { minWidth: 900, cols: 7 },
+      { minWidth: 700, cols: 6 },
+      { minWidth: 500, cols: 5 }
+    ] },
+    defaultCols: { default: 2 }
   },
   emits: ["reflow"],
   setup(__props, { emit: __emit }) {
@@ -22,26 +29,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const colTotalHeights = vue.ref([]);
     const measuredHeights = /* @__PURE__ */ new Map();
     const getColCount = () => {
-      var _a;
-      const colsNum = Number(props.cols);
-      if (colsNum > 0) return colsNum;
+      var _a, _b;
+      if (props.cols > 0) return props.cols;
       const width = ((_a = containerRef.value) == null ? void 0 : _a.clientWidth) ?? window.innerWidth;
-      if (width >= 1400) {
-        return props.templateType === "card-horizontal" ? 8 : 9;
-      }
-      if (width >= 1200) {
-        return props.templateType === "card-horizontal" ? 7 : 8;
-      }
-      if (width >= 900) {
-        return props.templateType === "card-horizontal" ? 5 : 7;
-      }
-      if (width >= 700) {
-        return props.templateType === "card-horizontal" ? 4 : 6;
-      }
-      if (width >= 500) {
-        return props.templateType === "card-horizontal" ? 4 : 5;
-      }
-      return 6;
+      const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth);
+      return ((_b = sorted.find((bp) => width >= bp.minWidth)) == null ? void 0 : _b.cols) ?? props.defaultCols;
     };
     const reflow = async () => {
       await vue.nextTick();
@@ -133,16 +125,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       containerRo == null ? void 0 : containerRo.disconnect();
       itemRo.disconnect();
     });
-    vue.watch(() => {
-      var _a;
-      return ((_a = props.items) == null ? void 0 : _a.length) ?? 0;
-    }, (newLen, oldLen = 0) => {
+    vue.watch(() => props.items.length, (newLen, oldLen) => {
       if (newLen < oldLen) measuredHeights.clear();
       reflow();
-    }, { immediate: true });
-    vue.watch(() => props.cols, () => {
-      measuredHeights.clear();
-      reflow();
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -151,7 +136,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: "wf-root",
         style: vue.normalizeStyle({ gap: `${__props.gap}px` })
       }, [
-        vue.createTextVNode(vue.toDisplayString(colPositions.value.length) + "列 ", 1),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(colPositions.value, (_col, ci) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: ci,
@@ -169,10 +153,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 style: vue.normalizeStyle({ transform: `translateY(${top}px)` }),
                 onVnodeUnmounted: _cache[0] || (_cache[0] = ({ el }) => unobserveItem(el))
               }, [
-                vue.renderSlot(_ctx.$slots, "default", {
-                  item,
-                  onLoad: (h) => patchHeight(globalIdx, h)
-                })
+                vue.renderSlot(_ctx.$slots, "default", { item }, void 0, true)
               ], 4);
             }), 128))
           ], 4);
@@ -181,13 +162,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-946f6fbc"]]);
 function install(app) {
-  app.component("TdWaterfall", _sfc_main);
+  app.component("TdWaterfall", Waterfall);
 }
 const TudouWaterfall = {
   install
 };
 exports.TudouWaterfall = TudouWaterfall;
-exports.Waterfall = _sfc_main;
+exports.Waterfall = Waterfall;
 exports.default = TudouWaterfall;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/components/Waterfall.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'\n\nexport interface WaterfallProps {\n  items: any[]\n  cols?: number\n  gap?: number\n  estimatedHeight?: number\n  templateType?: string\n  overscan?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 0,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\n})\n\nconst emit = defineEmits<{ (e: 'reflow'): void }>()\n\n// ─── types ────────────────────────────────────────────────────────────────────\n\ninterface PositionedItem {\n  item: any\n  globalIdx: number\n  top: number\n  height: number\n}\n\n// ─── state ────────────────────────────────────────────────────────────────────\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst scrollTop = ref(0)\nconst viewportHeight = ref(0)\n\n// colPositions[colIdx] = sorted array of positioned items\nconst colPositions = ref<PositionedItem[][]>([])\n// colTotalHeight[colIdx] = total height of that column (for the spacer div)\nconst colTotalHeights = ref<number[]>([])\n\n// globalIdx -> measured height (updated after image load)\nconst measuredHeights = new Map<number, number>()\n\n// ─── column count ─────────────────────────────────────────────────────────────\n\nconst getColCount = () => {\n  const colsNum = Number(props.cols)\n  if (colsNum > 0) return colsNum\n  const width = containerRef.value?.clientWidth ?? window.innerWidth\n  if (width >= 1400) {\n    return props.templateType === 'card-horizontal' ? 8 : 9\n  }\n  if (width >= 1200) {\n    return props.templateType === 'card-horizontal' ? 7 : 8\n  }\n  if (width >= 900) {\n    return props.templateType === 'card-horizontal' ? 5 : 7\n  }\n  if (width >= 700) {\n    return props.templateType === 'card-horizontal' ? 4 : 6\n  }\n  if (width >= 500) {\n    return props.templateType === 'card-horizontal' ? 4 : 5\n  }\n  return 6\n}\n\n// ─── full reflow: re-assign items to columns ──────────────────────────────────\n// Only called when items list changes or viewport width changes.\n// Does NOT re-assign on height updates to avoid item jumping between columns.\n\nconst reflow = async () => {\n  await nextTick()\n  const count = getColCount()\n  const cols: PositionedItem[][] = Array.from({ length: count }, () => [])\n  const colH = new Array(count).fill(0)\n\n  props.items.forEach((item, i) => {\n    const minIdx = colH.indexOf(Math.min(...colH))\n    const h = measuredHeights.get(i) ?? props.estimatedHeight\n    cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h })\n    colH[minIdx] += h + props.gap\n  })\n\n  colPositions.value = cols\n  colTotalHeights.value = colH\n  emit('reflow')\n}\n\n// ─── patch: update one item's height in-place, shift subsequent items ─────────\n// Called after an image loads. Avoids full reflow to prevent column reassignment.\n\nconst patchHeight = (globalIdx: number, newHeight: number) => {\n  const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight\n  if (Math.abs(old - newHeight) < 2) return // no meaningful change\n  measuredHeights.set(globalIdx, newHeight)\n\n  for (let ci = 0; ci < colPositions.value.length; ci++) {\n    const col = colPositions.value[ci]\n    const pos = col.findIndex(p => p.globalIdx === globalIdx)\n    if (pos === -1) continue\n\n    const delta = newHeight - col[pos].height\n    col[pos].height = newHeight\n\n    // shift all items below this one in the same column\n    for (let j = pos + 1; j < col.length; j++) {\n      col[j] = { ...col[j], top: col[j].top + delta }\n    }\n\n    // update total column height\n    colTotalHeights.value[ci] += delta\n    break\n  }\n}\n\n// ─── virtual visibility ───────────────────────────────────────────────────────\n\nconst visibleItems = computed(() => {\n  const top = scrollTop.value - props.overscan\n  const bottom = scrollTop.value + viewportHeight.value + props.overscan\n  return colPositions.value.map(col =>\n    col.filter(p => p.top + p.height >= top && p.top <= bottom)\n  )\n})\n\n// ─── scroll listener ──────────────────────────────────────────────────────────\n\nlet scrollEl: Element | null = null\n\nconst findScrollParent = (el: Element): Element => {\n  let cur: Element | null = el.parentElement\n  while (cur) {\n    const { overflow, overflowY } = getComputedStyle(cur)\n    if (/auto|scroll/.test(overflow + overflowY)) return cur\n    cur = cur.parentElement\n  }\n  return document.documentElement\n}\n\nconst onScroll = (e: Event) => {\n  const st = (e.target as Element).scrollTop\n  // Adjust for the container's offset within the scroll parent\n  const containerOffset = containerRef.value\n    ? (containerRef.value as HTMLElement).offsetTop\n    : 0\n  scrollTop.value = Math.max(0, st - containerOffset)\n}\n\n// ─── item resize observer ─────────────────────────────────────────────────────\n// One shared RO watches every .wf-item element.\n// el -> globalIdx mapping is stored in a WeakMap so we never leak.\n\nconst itemElMap = new WeakMap<Element, number>()\n\nconst itemRo = new ResizeObserver((entries) => {\n  for (const entry of entries) {\n    const globalIdx = itemElMap.get(entry.target)\n    if (globalIdx === undefined) continue\n    const h = entry.contentRect.height\n    if (h > 0) patchHeight(globalIdx, h)\n  }\n})\n\nconst observeItem = (el: Element, globalIdx: number) => {\n  itemElMap.set(el, globalIdx)\n  itemRo.observe(el)\n}\n\nconst unobserveItem = (el: Element) => {\n  itemRo.unobserve(el)\n  itemElMap.delete(el)\n}\n\n// ─── resize observer (container) ─────────────────────────────────────────────\n\nlet containerRo: ResizeObserver | null = null\n\n// ─── lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value) return\n\n  scrollEl = findScrollParent(containerRef.value)\n  scrollEl.addEventListener('scroll', onScroll, { passive: true })\n  viewportHeight.value = scrollEl === document.documentElement\n    ? window.innerHeight\n    : (scrollEl as HTMLElement).clientHeight\n\n  containerRo = new ResizeObserver(() => {\n    viewportHeight.value = scrollEl === document.documentElement\n      ? window.innerHeight\n      : (scrollEl as HTMLElement).clientHeight\n    reflow()\n  })\n  containerRo.observe(containerRef.value)\n\n  reflow()\n})\n\nonUnmounted(() => {\n  scrollEl?.removeEventListener('scroll', onScroll)\n  containerRo?.disconnect()\n  itemRo.disconnect()\n})\n\nwatch(() => props.items?.length ?? 0, (newLen, oldLen = 0) => {\n  // Only clear heights for removed items (e.g. search reset).\n  // On append (infinite scroll), keep existing measurements.\n  if (newLen < oldLen) measuredHeights.clear()\n  reflow()\n}, { immediate: true })\n\nwatch(() => props.cols, () => {\n  measuredHeights.clear()\n  reflow()\n})\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"wf-root\" :style=\"{ gap: `${gap}px` }\">\n    {{ colPositions.length }}列\n    <div\n      v-for=\"(_col, ci) in colPositions\"\n      :key=\"ci\"\n      class=\"wf-col\"\n      :style=\"{ height: `${colTotalHeights[ci]}px` }\"\n    >\n      <div\n        v-for=\"{ item, globalIdx, top } in visibleItems[ci]\"\n        :key=\"globalIdx\"\n        :ref=\"(el) => { if (el) observeItem(el as Element, globalIdx) }\"\n        class=\"wf-item\"\n        :style=\"{ transform: `translateY(${top}px)` }\"\n        @vue:unmounted=\"({ el }: any) => unobserveItem(el)\"\n      >\n        <slot\n          :item=\"item\"\n          :on-load=\"(h: number) => patchHeight(globalIdx, h)\"\n        />\n      </div>\n    </div>\n  </div>\n</template>","import type { App, Plugin } from 'vue'\n\nimport Waterfall from './components/Waterfall.vue'\nimport './assets/index.css'\n\nexport { Waterfall }\nexport type { WaterfallProps } from './components/Waterfall.vue'\n\nfunction install(app: App): void {\n  app.component('TdWaterfall', Waterfall)\n}\n\nconst TudouWaterfall: Plugin = {\n  install,\n}\n\nexport default TudouWaterfall\nexport { TudouWaterfall }\n"],"names":["ref","nextTick","computed","onMounted","onUnmounted","watch","_createElementBlock","_openBlock","_Fragment","_renderList","_normalizeStyle","_renderSlot","Waterfall"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/components/Waterfall.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'\n\nexport interface WaterfallBreakpoint {\n  minWidth: number\n  cols: number\n}\n\nexport interface WaterfallProps {\n  items: any[]\n  cols?: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n  /**\n   * Responsive breakpoints. Sorted descending by minWidth at runtime.\n   * Example: [{ minWidth: 1400, cols: 5 }, { minWidth: 900, cols: 3 }]\n   * Falls back to defaultCols when no breakpoint matches.\n   */\n  breakpoints?: WaterfallBreakpoint[]\n  /** Column count when no breakpoint matches (default: 2) */\n  defaultCols?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 0,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\n  breakpoints: () => [\n    { minWidth: 1400, cols: 9 },\n    { minWidth: 1200, cols: 8 },\n    { minWidth: 900,  cols: 7 },\n    { minWidth: 700,  cols: 6 },\n    { minWidth: 500,  cols: 5 },\n  ],\n  defaultCols: 2,\n})\n\nconst emit = defineEmits<{ (e: 'reflow'): void }>()\n\n// ─── types ────────────────────────────────────────────────────────────────────\n\ninterface PositionedItem {\n  item: any\n  globalIdx: number\n  top: number\n  height: number\n}\n\n// ─── state ────────────────────────────────────────────────────────────────────\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst scrollTop = ref(0)\nconst viewportHeight = ref(0)\n\n// colPositions[colIdx] = sorted array of positioned items\nconst colPositions = ref<PositionedItem[][]>([])\n// colTotalHeight[colIdx] = total height of that column (for the spacer div)\nconst colTotalHeights = ref<number[]>([])\n\n// globalIdx -> measured height (updated after image load)\nconst measuredHeights = new Map<number, number>()\n\n// ─── column count ─────────────────────────────────────────────────────────────\n\nconst getColCount = () => {\n  if (props.cols > 0) return props.cols\n  const width = containerRef.value?.clientWidth ?? window.innerWidth\n  const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth)\n  return sorted.find(bp => width >= bp.minWidth)?.cols ?? props.defaultCols\n}\n\n// ─── full reflow: re-assign items to columns ──────────────────────────────────\n// Only called when items list changes or viewport width changes.\n// Does NOT re-assign on height updates to avoid item jumping between columns.\n\nconst reflow = async () => {\n  await nextTick()\n  const count = getColCount()\n  const cols: PositionedItem[][] = Array.from({ length: count }, () => [])\n  const colH = new Array(count).fill(0)\n\n  props.items.forEach((item, i) => {\n    const minIdx = colH.indexOf(Math.min(...colH))\n    const h = measuredHeights.get(i) ?? props.estimatedHeight\n    cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h })\n    colH[minIdx] += h + props.gap\n  })\n\n  colPositions.value = cols\n  colTotalHeights.value = colH\n  emit('reflow')\n}\n\n// ─── patch: update one item's height in-place, shift subsequent items ─────────\n// Called after an image loads. Avoids full reflow to prevent column reassignment.\n\nconst patchHeight = (globalIdx: number, newHeight: number) => {\n  const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight\n  if (Math.abs(old - newHeight) < 2) return\n  measuredHeights.set(globalIdx, newHeight)\n\n  for (let ci = 0; ci < colPositions.value.length; ci++) {\n    const col = colPositions.value[ci]\n    const pos = col.findIndex(p => p.globalIdx === globalIdx)\n    if (pos === -1) continue\n\n    const delta = newHeight - col[pos].height\n    col[pos].height = newHeight\n\n    for (let j = pos + 1; j < col.length; j++) {\n      col[j] = { ...col[j], top: col[j].top + delta }\n    }\n\n    colTotalHeights.value[ci] += delta\n    break\n  }\n}\n\n// ─── virtual visibility ───────────────────────────────────────────────────────\n\nconst visibleItems = computed(() => {\n  const top = scrollTop.value - props.overscan\n  const bottom = scrollTop.value + viewportHeight.value + props.overscan\n  return colPositions.value.map(col =>\n    col.filter(p => p.top + p.height >= top && p.top <= bottom)\n  )\n})\n\n// ─── scroll listener ──────────────────────────────────────────────────────────\n\nlet scrollEl: Element | null = null\n\nconst findScrollParent = (el: Element): Element => {\n  let cur: Element | null = el.parentElement\n  while (cur) {\n    const { overflow, overflowY } = getComputedStyle(cur)\n    if (/auto|scroll/.test(overflow + overflowY)) return cur\n    cur = cur.parentElement\n  }\n  return document.documentElement\n}\n\nconst onScroll = (e: Event) => {\n  const st = (e.target as Element).scrollTop\n  const containerOffset = containerRef.value\n    ? (containerRef.value as HTMLElement).offsetTop\n    : 0\n  scrollTop.value = Math.max(0, st - containerOffset)\n}\n\n// ─── item resize observer ─────────────────────────────────────────────────────\n// One shared RO watches every .wf-item element.\n// el -> globalIdx mapping is stored in a WeakMap so we never leak.\n\nconst itemElMap = new WeakMap<Element, number>()\n\nconst itemRo = new ResizeObserver((entries) => {\n  for (const entry of entries) {\n    const globalIdx = itemElMap.get(entry.target)\n    if (globalIdx === undefined) continue\n    const h = entry.contentRect.height\n    if (h > 0) patchHeight(globalIdx, h)\n  }\n})\n\nconst observeItem = (el: Element, globalIdx: number) => {\n  itemElMap.set(el, globalIdx)\n  itemRo.observe(el)\n}\n\nconst unobserveItem = (el: Element) => {\n  itemRo.unobserve(el)\n  itemElMap.delete(el)\n}\n\n// ─── resize observer (container) ─────────────────────────────────────────────\n\nlet containerRo: ResizeObserver | null = null\n\n// ─── lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value) return\n\n  scrollEl = findScrollParent(containerRef.value)\n  scrollEl.addEventListener('scroll', onScroll, { passive: true })\n  viewportHeight.value = scrollEl === document.documentElement\n    ? window.innerHeight\n    : (scrollEl as HTMLElement).clientHeight\n\n  containerRo = new ResizeObserver(() => {\n    viewportHeight.value = scrollEl === document.documentElement\n      ? window.innerHeight\n      : (scrollEl as HTMLElement).clientHeight\n    reflow()\n  })\n  containerRo.observe(containerRef.value)\n\n  reflow()\n})\n\nonUnmounted(() => {\n  scrollEl?.removeEventListener('scroll', onScroll)\n  containerRo?.disconnect()\n  itemRo.disconnect()\n})\n\nwatch(() => props.items.length, (newLen, oldLen) => {\n  if (newLen < oldLen) measuredHeights.clear()\n  reflow()\n})\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"wf-root\" :style=\"{ gap: `${gap}px` }\">\n    <div\n      v-for=\"(_col, ci) in colPositions\"\n      :key=\"ci\"\n      class=\"wf-col\"\n      :style=\"{ height: `${colTotalHeights[ci]}px` }\"\n    >\n      <div\n        v-for=\"{ item, globalIdx, top } in visibleItems[ci]\"\n        :key=\"globalIdx\"\n        :ref=\"(el) => { if (el) observeItem(el as Element, globalIdx) }\"\n        class=\"wf-item\"\n        :style=\"{ transform: `translateY(${top}px)` }\"\n        @vue:unmounted=\"({ el }: any) => unobserveItem(el)\"\n      >\n        <slot :item=\"item\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.wf-root {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.wf-col {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n\n.wf-item {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n</style>\n","import type { App, Plugin } from 'vue'\n\nimport Waterfall from './components/Waterfall.vue'\nimport './assets/index.css'\n\nexport { Waterfall }\nexport type { WaterfallProps } from './components/Waterfall.vue'\n\nfunction install(app: App): void {\n  app.component('TdWaterfall', Waterfall)\n}\n\nconst TudouWaterfall: Plugin = {\n  install,\n}\n\nexport default TudouWaterfall\nexport { TudouWaterfall }\n"],"names":["ref","nextTick","computed","onMounted","onUnmounted","watch","_createElementBlock","_openBlock","_Fragment","_renderList","_normalizeStyle","_renderSlot"],"mappings":"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"}

package/dist/index.d.ts

@@ -11,6 +11,11 @@ cols: number;
 gap: number;
 estimatedHeight: number;
 overscan: number;
+breakpoints: () => {
+minWidth: number;
+cols: number;
+}[];
+defaultCols: number;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 reflow: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<WaterfallProps>, {
@@ -18,6 +23,11 @@ cols: number;
 gap: number;
 estimatedHeight: number;
 overscan: number;
+breakpoints: () => {
+minWidth: number;
+cols: number;
+}[];
+defaultCols: number;
 }>>> & Readonly<{
 onReflow?: (() => any) | undefined;
 }>, {
@@ -25,6 +35,8 @@ cols: number;
 gap: number;
 estimatedHeight: number;
 overscan: number;
+breakpoints: WaterfallBreakpoint[];
+defaultCols: number;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -36,7 +48,6 @@ declare type __VLS_Prettify<T> = {
 declare function __VLS_template(): {
     default?(_: {
         item: any;
-        onLoad: (h: number) => void;
     }): any;
 };
 
@@ -67,13 +78,25 @@ export default TudouWaterfall;
 
 export declare const Waterfall: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 
+declare interface WaterfallBreakpoint {
+    minWidth: number;
+    cols: number;
+}
+
 export declare interface WaterfallProps {
     items: any[];
     cols?: number;
     gap?: number;
     estimatedHeight?: number;
-    templateType?: string;
     overscan?: number;
+    /**
+     * Responsive breakpoints. Sorted descending by minWidth at runtime.
+     * Example: [{ minWidth: 1400, cols: 5 }, { minWidth: 900, cols: 3 }]
+     * Falls back to defaultCols when no breakpoint matches.
+     */
+    breakpoints?: WaterfallBreakpoint[];
+    /** Column count when no breakpoint matches (default: 2) */
+    defaultCols?: number;
 }
 
 export { }

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, watch, openBlock, createElementBlock, normalizeStyle, createTextVNode, toDisplayString, Fragment, renderList, renderSlot } from "vue";
+import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, watch, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, renderSlot } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Waterfall",
   props: {
@@ -6,8 +6,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     cols: { default: 0 },
     gap: { default: 15 },
     estimatedHeight: { default: 220 },
-    templateType: {},
-    overscan: { default: 600 }
+    overscan: { default: 600 },
+    breakpoints: { default: () => [
+      { minWidth: 1400, cols: 9 },
+      { minWidth: 1200, cols: 8 },
+      { minWidth: 900, cols: 7 },
+      { minWidth: 700, cols: 6 },
+      { minWidth: 500, cols: 5 }
+    ] },
+    defaultCols: { default: 2 }
   },
   emits: ["reflow"],
   setup(__props, { emit: __emit }) {
@@ -20,26 +27,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const colTotalHeights = ref([]);
     const measuredHeights = /* @__PURE__ */ new Map();
     const getColCount = () => {
-      var _a;
-      const colsNum = Number(props.cols);
-      if (colsNum > 0) return colsNum;
+      var _a, _b;
+      if (props.cols > 0) return props.cols;
       const width = ((_a = containerRef.value) == null ? void 0 : _a.clientWidth) ?? window.innerWidth;
-      if (width >= 1400) {
-        return props.templateType === "card-horizontal" ? 8 : 9;
-      }
-      if (width >= 1200) {
-        return props.templateType === "card-horizontal" ? 7 : 8;
-      }
-      if (width >= 900) {
-        return props.templateType === "card-horizontal" ? 5 : 7;
-      }
-      if (width >= 700) {
-        return props.templateType === "card-horizontal" ? 4 : 6;
-      }
-      if (width >= 500) {
-        return props.templateType === "card-horizontal" ? 4 : 5;
-      }
-      return 6;
+      const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth);
+      return ((_b = sorted.find((bp) => width >= bp.minWidth)) == null ? void 0 : _b.cols) ?? props.defaultCols;
     };
     const reflow = async () => {
       await nextTick();
@@ -131,16 +123,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       containerRo == null ? void 0 : containerRo.disconnect();
       itemRo.disconnect();
     });
-    watch(() => {
-      var _a;
-      return ((_a = props.items) == null ? void 0 : _a.length) ?? 0;
-    }, (newLen, oldLen = 0) => {
+    watch(() => props.items.length, (newLen, oldLen) => {
       if (newLen < oldLen) measuredHeights.clear();
       reflow();
-    }, { immediate: true });
-    watch(() => props.cols, () => {
-      measuredHeights.clear();
-      reflow();
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -149,7 +134,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: "wf-root",
         style: normalizeStyle({ gap: `${__props.gap}px` })
       }, [
-        createTextVNode(toDisplayString(colPositions.value.length) + "列 ", 1),
         (openBlock(true), createElementBlock(Fragment, null, renderList(colPositions.value, (_col, ci) => {
           return openBlock(), createElementBlock("div", {
             key: ci,
@@ -167,10 +151,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 style: normalizeStyle({ transform: `translateY(${top}px)` }),
                 onVnodeUnmounted: _cache[0] || (_cache[0] = ({ el }) => unobserveItem(el))
               }, [
-                renderSlot(_ctx.$slots, "default", {
-                  item,
-                  onLoad: (h) => patchHeight(globalIdx, h)
-                })
+                renderSlot(_ctx.$slots, "default", { item }, void 0, true)
               ], 4);
             }), 128))
           ], 4);
@@ -179,15 +160,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-946f6fbc"]]);
 function install(app) {
-  app.component("TdWaterfall", _sfc_main);
+  app.component("TdWaterfall", Waterfall);
 }
 const TudouWaterfall = {
   install
 };
 export {
   TudouWaterfall,
-  _sfc_main as Waterfall,
+  Waterfall,
   TudouWaterfall as default
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/components/Waterfall.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'\n\nexport interface WaterfallProps {\n  items: any[]\n  cols?: number\n  gap?: number\n  estimatedHeight?: number\n  templateType?: string\n  overscan?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 0,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\n})\n\nconst emit = defineEmits<{ (e: 'reflow'): void }>()\n\n// ─── types ────────────────────────────────────────────────────────────────────\n\ninterface PositionedItem {\n  item: any\n  globalIdx: number\n  top: number\n  height: number\n}\n\n// ─── state ────────────────────────────────────────────────────────────────────\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst scrollTop = ref(0)\nconst viewportHeight = ref(0)\n\n// colPositions[colIdx] = sorted array of positioned items\nconst colPositions = ref<PositionedItem[][]>([])\n// colTotalHeight[colIdx] = total height of that column (for the spacer div)\nconst colTotalHeights = ref<number[]>([])\n\n// globalIdx -> measured height (updated after image load)\nconst measuredHeights = new Map<number, number>()\n\n// ─── column count ─────────────────────────────────────────────────────────────\n\nconst getColCount = () => {\n  const colsNum = Number(props.cols)\n  if (colsNum > 0) return colsNum\n  const width = containerRef.value?.clientWidth ?? window.innerWidth\n  if (width >= 1400) {\n    return props.templateType === 'card-horizontal' ? 8 : 9\n  }\n  if (width >= 1200) {\n    return props.templateType === 'card-horizontal' ? 7 : 8\n  }\n  if (width >= 900) {\n    return props.templateType === 'card-horizontal' ? 5 : 7\n  }\n  if (width >= 700) {\n    return props.templateType === 'card-horizontal' ? 4 : 6\n  }\n  if (width >= 500) {\n    return props.templateType === 'card-horizontal' ? 4 : 5\n  }\n  return 6\n}\n\n// ─── full reflow: re-assign items to columns ──────────────────────────────────\n// Only called when items list changes or viewport width changes.\n// Does NOT re-assign on height updates to avoid item jumping between columns.\n\nconst reflow = async () => {\n  await nextTick()\n  const count = getColCount()\n  const cols: PositionedItem[][] = Array.from({ length: count }, () => [])\n  const colH = new Array(count).fill(0)\n\n  props.items.forEach((item, i) => {\n    const minIdx = colH.indexOf(Math.min(...colH))\n    const h = measuredHeights.get(i) ?? props.estimatedHeight\n    cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h })\n    colH[minIdx] += h + props.gap\n  })\n\n  colPositions.value = cols\n  colTotalHeights.value = colH\n  emit('reflow')\n}\n\n// ─── patch: update one item's height in-place, shift subsequent items ─────────\n// Called after an image loads. Avoids full reflow to prevent column reassignment.\n\nconst patchHeight = (globalIdx: number, newHeight: number) => {\n  const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight\n  if (Math.abs(old - newHeight) < 2) return // no meaningful change\n  measuredHeights.set(globalIdx, newHeight)\n\n  for (let ci = 0; ci < colPositions.value.length; ci++) {\n    const col = colPositions.value[ci]\n    const pos = col.findIndex(p => p.globalIdx === globalIdx)\n    if (pos === -1) continue\n\n    const delta = newHeight - col[pos].height\n    col[pos].height = newHeight\n\n    // shift all items below this one in the same column\n    for (let j = pos + 1; j < col.length; j++) {\n      col[j] = { ...col[j], top: col[j].top + delta }\n    }\n\n    // update total column height\n    colTotalHeights.value[ci] += delta\n    break\n  }\n}\n\n// ─── virtual visibility ───────────────────────────────────────────────────────\n\nconst visibleItems = computed(() => {\n  const top = scrollTop.value - props.overscan\n  const bottom = scrollTop.value + viewportHeight.value + props.overscan\n  return colPositions.value.map(col =>\n    col.filter(p => p.top + p.height >= top && p.top <= bottom)\n  )\n})\n\n// ─── scroll listener ──────────────────────────────────────────────────────────\n\nlet scrollEl: Element | null = null\n\nconst findScrollParent = (el: Element): Element => {\n  let cur: Element | null = el.parentElement\n  while (cur) {\n    const { overflow, overflowY } = getComputedStyle(cur)\n    if (/auto|scroll/.test(overflow + overflowY)) return cur\n    cur = cur.parentElement\n  }\n  return document.documentElement\n}\n\nconst onScroll = (e: Event) => {\n  const st = (e.target as Element).scrollTop\n  // Adjust for the container's offset within the scroll parent\n  const containerOffset = containerRef.value\n    ? (containerRef.value as HTMLElement).offsetTop\n    : 0\n  scrollTop.value = Math.max(0, st - containerOffset)\n}\n\n// ─── item resize observer ─────────────────────────────────────────────────────\n// One shared RO watches every .wf-item element.\n// el -> globalIdx mapping is stored in a WeakMap so we never leak.\n\nconst itemElMap = new WeakMap<Element, number>()\n\nconst itemRo = new ResizeObserver((entries) => {\n  for (const entry of entries) {\n    const globalIdx = itemElMap.get(entry.target)\n    if (globalIdx === undefined) continue\n    const h = entry.contentRect.height\n    if (h > 0) patchHeight(globalIdx, h)\n  }\n})\n\nconst observeItem = (el: Element, globalIdx: number) => {\n  itemElMap.set(el, globalIdx)\n  itemRo.observe(el)\n}\n\nconst unobserveItem = (el: Element) => {\n  itemRo.unobserve(el)\n  itemElMap.delete(el)\n}\n\n// ─── resize observer (container) ─────────────────────────────────────────────\n\nlet containerRo: ResizeObserver | null = null\n\n// ─── lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value) return\n\n  scrollEl = findScrollParent(containerRef.value)\n  scrollEl.addEventListener('scroll', onScroll, { passive: true })\n  viewportHeight.value = scrollEl === document.documentElement\n    ? window.innerHeight\n    : (scrollEl as HTMLElement).clientHeight\n\n  containerRo = new ResizeObserver(() => {\n    viewportHeight.value = scrollEl === document.documentElement\n      ? window.innerHeight\n      : (scrollEl as HTMLElement).clientHeight\n    reflow()\n  })\n  containerRo.observe(containerRef.value)\n\n  reflow()\n})\n\nonUnmounted(() => {\n  scrollEl?.removeEventListener('scroll', onScroll)\n  containerRo?.disconnect()\n  itemRo.disconnect()\n})\n\nwatch(() => props.items?.length ?? 0, (newLen, oldLen = 0) => {\n  // Only clear heights for removed items (e.g. search reset).\n  // On append (infinite scroll), keep existing measurements.\n  if (newLen < oldLen) measuredHeights.clear()\n  reflow()\n}, { immediate: true })\n\nwatch(() => props.cols, () => {\n  measuredHeights.clear()\n  reflow()\n})\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"wf-root\" :style=\"{ gap: `${gap}px` }\">\n    {{ colPositions.length }}列\n    <div\n      v-for=\"(_col, ci) in colPositions\"\n      :key=\"ci\"\n      class=\"wf-col\"\n      :style=\"{ height: `${colTotalHeights[ci]}px` }\"\n    >\n      <div\n        v-for=\"{ item, globalIdx, top } in visibleItems[ci]\"\n        :key=\"globalIdx\"\n        :ref=\"(el) => { if (el) observeItem(el as Element, globalIdx) }\"\n        class=\"wf-item\"\n        :style=\"{ transform: `translateY(${top}px)` }\"\n        @vue:unmounted=\"({ el }: any) => unobserveItem(el)\"\n      >\n        <slot\n          :item=\"item\"\n          :on-load=\"(h: number) => patchHeight(globalIdx, h)\"\n        />\n      </div>\n    </div>\n  </div>\n</template>","import type { App, Plugin } from 'vue'\n\nimport Waterfall from './components/Waterfall.vue'\nimport './assets/index.css'\n\nexport { Waterfall }\nexport type { WaterfallProps } from './components/Waterfall.vue'\n\nfunction install(app: App): void {\n  app.component('TdWaterfall', Waterfall)\n}\n\nconst TudouWaterfall: Plugin = {\n  install,\n}\n\nexport default TudouWaterfall\nexport { TudouWaterfall }\n"],"names":["_createElementBlock","_openBlock","_Fragment","_renderList","_normalizeStyle","_renderSlot","Waterfall"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../src/components/Waterfall.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'\n\nexport interface WaterfallBreakpoint {\n  minWidth: number\n  cols: number\n}\n\nexport interface WaterfallProps {\n  items: any[]\n  cols?: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n  /**\n   * Responsive breakpoints. Sorted descending by minWidth at runtime.\n   * Example: [{ minWidth: 1400, cols: 5 }, { minWidth: 900, cols: 3 }]\n   * Falls back to defaultCols when no breakpoint matches.\n   */\n  breakpoints?: WaterfallBreakpoint[]\n  /** Column count when no breakpoint matches (default: 2) */\n  defaultCols?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 0,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\n  breakpoints: () => [\n    { minWidth: 1400, cols: 9 },\n    { minWidth: 1200, cols: 8 },\n    { minWidth: 900,  cols: 7 },\n    { minWidth: 700,  cols: 6 },\n    { minWidth: 500,  cols: 5 },\n  ],\n  defaultCols: 2,\n})\n\nconst emit = defineEmits<{ (e: 'reflow'): void }>()\n\n// ─── types ────────────────────────────────────────────────────────────────────\n\ninterface PositionedItem {\n  item: any\n  globalIdx: number\n  top: number\n  height: number\n}\n\n// ─── state ────────────────────────────────────────────────────────────────────\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst scrollTop = ref(0)\nconst viewportHeight = ref(0)\n\n// colPositions[colIdx] = sorted array of positioned items\nconst colPositions = ref<PositionedItem[][]>([])\n// colTotalHeight[colIdx] = total height of that column (for the spacer div)\nconst colTotalHeights = ref<number[]>([])\n\n// globalIdx -> measured height (updated after image load)\nconst measuredHeights = new Map<number, number>()\n\n// ─── column count ─────────────────────────────────────────────────────────────\n\nconst getColCount = () => {\n  if (props.cols > 0) return props.cols\n  const width = containerRef.value?.clientWidth ?? window.innerWidth\n  const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth)\n  return sorted.find(bp => width >= bp.minWidth)?.cols ?? props.defaultCols\n}\n\n// ─── full reflow: re-assign items to columns ──────────────────────────────────\n// Only called when items list changes or viewport width changes.\n// Does NOT re-assign on height updates to avoid item jumping between columns.\n\nconst reflow = async () => {\n  await nextTick()\n  const count = getColCount()\n  const cols: PositionedItem[][] = Array.from({ length: count }, () => [])\n  const colH = new Array(count).fill(0)\n\n  props.items.forEach((item, i) => {\n    const minIdx = colH.indexOf(Math.min(...colH))\n    const h = measuredHeights.get(i) ?? props.estimatedHeight\n    cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h })\n    colH[minIdx] += h + props.gap\n  })\n\n  colPositions.value = cols\n  colTotalHeights.value = colH\n  emit('reflow')\n}\n\n// ─── patch: update one item's height in-place, shift subsequent items ─────────\n// Called after an image loads. Avoids full reflow to prevent column reassignment.\n\nconst patchHeight = (globalIdx: number, newHeight: number) => {\n  const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight\n  if (Math.abs(old - newHeight) < 2) return\n  measuredHeights.set(globalIdx, newHeight)\n\n  for (let ci = 0; ci < colPositions.value.length; ci++) {\n    const col = colPositions.value[ci]\n    const pos = col.findIndex(p => p.globalIdx === globalIdx)\n    if (pos === -1) continue\n\n    const delta = newHeight - col[pos].height\n    col[pos].height = newHeight\n\n    for (let j = pos + 1; j < col.length; j++) {\n      col[j] = { ...col[j], top: col[j].top + delta }\n    }\n\n    colTotalHeights.value[ci] += delta\n    break\n  }\n}\n\n// ─── virtual visibility ───────────────────────────────────────────────────────\n\nconst visibleItems = computed(() => {\n  const top = scrollTop.value - props.overscan\n  const bottom = scrollTop.value + viewportHeight.value + props.overscan\n  return colPositions.value.map(col =>\n    col.filter(p => p.top + p.height >= top && p.top <= bottom)\n  )\n})\n\n// ─── scroll listener ──────────────────────────────────────────────────────────\n\nlet scrollEl: Element | null = null\n\nconst findScrollParent = (el: Element): Element => {\n  let cur: Element | null = el.parentElement\n  while (cur) {\n    const { overflow, overflowY } = getComputedStyle(cur)\n    if (/auto|scroll/.test(overflow + overflowY)) return cur\n    cur = cur.parentElement\n  }\n  return document.documentElement\n}\n\nconst onScroll = (e: Event) => {\n  const st = (e.target as Element).scrollTop\n  const containerOffset = containerRef.value\n    ? (containerRef.value as HTMLElement).offsetTop\n    : 0\n  scrollTop.value = Math.max(0, st - containerOffset)\n}\n\n// ─── item resize observer ─────────────────────────────────────────────────────\n// One shared RO watches every .wf-item element.\n// el -> globalIdx mapping is stored in a WeakMap so we never leak.\n\nconst itemElMap = new WeakMap<Element, number>()\n\nconst itemRo = new ResizeObserver((entries) => {\n  for (const entry of entries) {\n    const globalIdx = itemElMap.get(entry.target)\n    if (globalIdx === undefined) continue\n    const h = entry.contentRect.height\n    if (h > 0) patchHeight(globalIdx, h)\n  }\n})\n\nconst observeItem = (el: Element, globalIdx: number) => {\n  itemElMap.set(el, globalIdx)\n  itemRo.observe(el)\n}\n\nconst unobserveItem = (el: Element) => {\n  itemRo.unobserve(el)\n  itemElMap.delete(el)\n}\n\n// ─── resize observer (container) ─────────────────────────────────────────────\n\nlet containerRo: ResizeObserver | null = null\n\n// ─── lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value) return\n\n  scrollEl = findScrollParent(containerRef.value)\n  scrollEl.addEventListener('scroll', onScroll, { passive: true })\n  viewportHeight.value = scrollEl === document.documentElement\n    ? window.innerHeight\n    : (scrollEl as HTMLElement).clientHeight\n\n  containerRo = new ResizeObserver(() => {\n    viewportHeight.value = scrollEl === document.documentElement\n      ? window.innerHeight\n      : (scrollEl as HTMLElement).clientHeight\n    reflow()\n  })\n  containerRo.observe(containerRef.value)\n\n  reflow()\n})\n\nonUnmounted(() => {\n  scrollEl?.removeEventListener('scroll', onScroll)\n  containerRo?.disconnect()\n  itemRo.disconnect()\n})\n\nwatch(() => props.items.length, (newLen, oldLen) => {\n  if (newLen < oldLen) measuredHeights.clear()\n  reflow()\n})\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"wf-root\" :style=\"{ gap: `${gap}px` }\">\n    <div\n      v-for=\"(_col, ci) in colPositions\"\n      :key=\"ci\"\n      class=\"wf-col\"\n      :style=\"{ height: `${colTotalHeights[ci]}px` }\"\n    >\n      <div\n        v-for=\"{ item, globalIdx, top } in visibleItems[ci]\"\n        :key=\"globalIdx\"\n        :ref=\"(el) => { if (el) observeItem(el as Element, globalIdx) }\"\n        class=\"wf-item\"\n        :style=\"{ transform: `translateY(${top}px)` }\"\n        @vue:unmounted=\"({ el }: any) => unobserveItem(el)\"\n      >\n        <slot :item=\"item\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.wf-root {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.wf-col {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n\n.wf-item {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n</style>\n","import type { App, Plugin } from 'vue'\n\nimport Waterfall from './components/Waterfall.vue'\nimport './assets/index.css'\n\nexport { Waterfall }\nexport type { WaterfallProps } from './components/Waterfall.vue'\n\nfunction install(app: App): void {\n  app.component('TdWaterfall', Waterfall)\n}\n\nconst TudouWaterfall: Plugin = {\n  install,\n}\n\nexport default TudouWaterfall\nexport { TudouWaterfall }\n"],"names":["_createElementBlock","_openBlock","_Fragment","_renderList","_normalizeStyle","_renderSlot"],"mappings":"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"}

package/dist/style.css

@@ -1,3 +1,20 @@
+
+.wf-root[data-v-946f6fbc] {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+.wf-col[data-v-946f6fbc] {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+}
+.wf-item[data-v-946f6fbc] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
 .wf-root {
     display: flex;
     align-items: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tudou-waterfall",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "A Vue 3 plugin with UI components, directives, and global methods",
   "type": "module",
   "main": "./dist/index.cjs",