wc-waterfall

wc-waterfall 是一个使用 web-component 编写的高性能瀑布流组件

它可以支持在各种框架中运行，如 React Vue SolidJs

🌈 演示

• https://huodoushigemi.github.io/wc-flow-layout/
• codepen — 基本用法
• codepen — 照片墙
• Vue SFC 演练场
• SolidJs 演练场
• 动画

⚙️ 安装

• npm

npm i wc-waterfall

• scripts

<script src="https://cdn.jsdelivr.net/npm/wc-waterfall/dist/index.iife.js"></script>

🦄 示例

🚀 在 VanillaJS 中使用

import 'wc-waterfall'

<wc-waterfall gap="10" cols="3">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</wc-waterfall>

🚀 在 React 中使用

// App.tsx
import 'wc-waterfall'

export default function MyApp() {
  return (
    <wc-waterfall gap={10} cols={3}>
      <div>01</div>
      <div>02</div>
      <div>03</div>
      <div>04</div>
      <div>05</div>
      <div>06</div>
    </wc-waterfall>
  )
}

TypeScript 支持 (JSX/TSX)

// shims.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    'wc-waterfall': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & import('wc-waterfall').WaterfallProps, HTMLElement>;
  }
}

🚀 在 Vue 中使用

// main.ts
import 'wc-waterfall'

<!-- App.vue -->
<template>
  <wc-waterfall :gap="10" :cols="3">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
  </wc-waterfall>
</template>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: { isCustomElement: (tag) => tag.startsWith('wc-') }
      },
    })
  ],
})

🚀 在 SSR 中使用

- import 'wc-waterfall'
+ if (typeof document != 'undefined') import('wc-waterfall')

📄 属性

⭐️ 表示支持

如果这个项目对你有帮助，请给一个 ⭐️！

👏 贡献

如果你有任何问题或请求，或者想要贡献，请随时提出问题或给我一个 Pull Request。