The wc-waterfall is a high performance waterfall component written using web-component
It can support running in various frameworks, such as React Vue SolidJs
- https://huodoushigemi.github.io/wc-flow-layout/
- codepen — Basic usage
- codepen — Photo wall
- Vue SFC Playground
- SolidJs Playground
- Animation
npm i wc-waterfall<script src="https://cdn.jsdelivr.net/npm/wc-waterfall/dist/index.iife.js"></script>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>// 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 support (JSX/TSX)
// shims.d.ts
declare namespace JSX {
interface IntrinsicElements {
'wc-waterfall': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
gap?: number;
cols?: number;
}, HTMLElement>;
}
}// 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-') }
},
})
],
})- import 'wc-waterfall'
+ if (typeof document != 'undefined') import('wc-waterfall')| Name | Type | Default | Description |
|---|---|---|---|
| cols | number |
2 | Number of columns |
| gap | number |
4 | Interval between cells |
Please give a ⭐️ if this project helped you!
If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent