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> & import('wc-waterfall').WaterfallProps, 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 | [number, 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.