{"id":13824519,"url":"https://github.com/lhlyu/vue-virtual-waterfall","last_synced_at":"2026-01-28T16:11:00.297Z","repository":{"id":177855629,"uuid":"661007847","full_name":"lhlyu/vue-virtual-waterfall","owner":"lhlyu","description":"vue3 virtual waterfall component（Vue3虚拟瀑布流组件）","archived":false,"fork":false,"pushed_at":"2025-08-06T03:40:00.000Z","size":3187,"stargazers_count":190,"open_issues_count":2,"forks_count":28,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-06T05:24:12.487Z","etag":null,"topics":["component","typescript","virtual-list","vite","vue","vue-component","vue3","vueuse","waterfall"],"latest_commit_sha":null,"homepage":"https://waterfall.tatakai.top","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lhlyu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-01T13:52:53.000Z","updated_at":"2025-08-06T03:40:05.000Z","dependencies_parsed_at":"2023-07-10T18:16:23.626Z","dependency_job_id":"39e4ffc4-02a8-4090-9c96-115899b35576","html_url":"https://github.com/lhlyu/vue-virtual-waterfall","commit_stats":null,"previous_names":["lhlyu/vue-virtual-waterfall"],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/lhlyu/vue-virtual-waterfall","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhlyu%2Fvue-virtual-waterfall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhlyu%2Fvue-virtual-waterfall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhlyu%2Fvue-virtual-waterfall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhlyu%2Fvue-virtual-waterfall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lhlyu","download_url":"https://codeload.github.com/lhlyu/vue-virtual-waterfall/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lhlyu%2Fvue-virtual-waterfall/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28846834,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","typescript","virtual-list","vite","vue","vue-component","vue3","vueuse","waterfall"],"created_at":"2024-08-04T09:01:04.174Z","updated_at":"2026-01-28T16:11:00.291Z","avatar_url":"https://github.com/lhlyu.png","language":"Vue","funding_links":[],"categories":["Packages","Components \u0026 Libraries"],"sub_categories":["UI Layout"],"readme":"# vue-virtual-waterfall\n\n\u003e A Vue 3 virtual waterfall component\n\n[![npm](https://img.shields.io/npm/v/@lhlyu/vue-virtual-waterfall)](https://www.npmjs.com/package/@lhlyu/vue-virtual-waterfall)\n![Last Commit](https://img.shields.io/github/last-commit/lhlyu/vue-virtual-waterfall)\n\n[中文文档](./README.zh.md)\n\n## Example\n\n- [Example](https://waterfall.tatakai.top)\n- [Example Source Code](./src/example/Example.vue)\n\n## Usage\n\n\u003e pnpm add @lhlyu/vue-virtual-waterfall\n\n- Local import\n\n```ts\nimport { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'\n```\n\n- Global import\n\n```ts\nimport VueVirtualWaterfall from '@lhlyu/vue-virtual-waterfall'\n\napp.use(VueVirtualWaterfall)\n```\n\n- Usage\n\n```vue\n\u003ctemplate\u003e\n    \u003cVirtualWaterfall\n        :items=\"items\"\n        :calcItemHeight=\"calcItemHeight\"\n    \u003e\n        \u003ctemplate #default=\"{ item }: { item: ItemOption }\"\u003e\n            \u003cdiv class=\"card\"\u003e\n                \u003cimg :src=\"item.img\" /\u003e\n            \u003c/div\u003e\n        \u003c/template\u003e\n    \u003c/VirtualWaterfall\u003e\n\u003c/template\u003e\n```\n\n- Nuxt3 Usage\n\n[demo](https://codesandbox.io/p/devbox/vue-virtual-waterfall-nuxt-demo-h7g569)\n\n### Attention!!!\n\n**The `VirtualWaterfall` component wants to implement a virtual list, and the container that wraps it must indicate a\nfixed height. The scrolling event can be bound to this container. If this component is hung under the body, the height\nof the body also needs to be specified. The scrolling event can be bound to the `window`**\n\n## Documentation\n\n- Properties\n\n| Field              | Type                                       | Default                                 | Description                           |\n| ------------------ | ------------------------------------------ | --------------------------------------- | ------------------------------------- |\n| virtual            | boolean                                    | true                                    | Enable virtual list                   |\n| rowKey             | string                                     | 'id'                                    | Key for v-for                         |\n| enableCache        | boolean                                    | true                                    | enable cache                          |\n| gap                | number                                     | 15                                      | Gap between each item                 |\n| padding            | number or string                           | 15 or '15px 15px'                       | Container's padding                   |\n| preloadScreenCount | `[number, number]`                         | `[0, 0]`                                | Preload screen count `[above, below]` |\n| itemMinWidth       | number                                     | 220                                     | Minimum width for each item           |\n| maxColumnCount     | number                                     | 10                                      | Maximum number of columns             |\n| minColumnCount     | number                                     | 2                                       | Minimum number of columns             |\n| items              | any[]                                      | []                                      | Data                                  |\n| calcItemHeight     | `(item: any, itemWidth: number) =\u003e number` | `(item: any, itemWidth: number) =\u003e 250` | Method to calculate item height       |\n\n- Slots\n\n| Event   | Type                           | Description            |\n| ------- | ------------------------------ | ---------------------- |\n| default | `{ item: any, index: number }` | Custom default content |\n\n- Methods\n\n| Event          | Type                                                              | Description           |\n| -------------- | ----------------------------------------------------------------- | --------------------- |\n| withItemSpaces | `(cb: (spaces: readonly SpaceOption[]) =\u003e Promise\u003cvoid\u003e \\| void)` | Read Item Spaces Info |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhlyu%2Fvue-virtual-waterfall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flhlyu%2Fvue-virtual-waterfall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flhlyu%2Fvue-virtual-waterfall/lists"}