{"id":13424042,"url":"https://github.com/MopTym/vue-waterfall","last_synced_at":"2025-03-15T17:32:59.201Z","repository":{"id":37335205,"uuid":"51736849","full_name":"MopTym/vue-waterfall","owner":"MopTym","description":"A waterfall layout component for Vue.js","archived":false,"fork":false,"pushed_at":"2018-01-19T08:41:58.000Z","size":406,"stargazers_count":2144,"open_issues_count":38,"forks_count":258,"subscribers_count":43,"default_branch":"master","last_synced_at":"2024-05-12T11:04:05.848Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/MopTym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-15T06:59:06.000Z","updated_at":"2024-05-10T03:02:24.000Z","dependencies_parsed_at":"2022-07-12T11:55:06.466Z","dependency_job_id":null,"html_url":"https://github.com/MopTym/vue-waterfall","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MopTym%2Fvue-waterfall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MopTym%2Fvue-waterfall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MopTym%2Fvue-waterfall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MopTym%2Fvue-waterfall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MopTym","download_url":"https://codeload.github.com/MopTym/vue-waterfall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221593477,"owners_count":16849125,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-07-31T00:00:47.348Z","updated_at":"2024-10-26T22:32:34.630Z","avatar_url":"https://github.com/MopTym.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","HarmonyOS","Vue","UI组件","UI布局","Components \u0026 Libraries","UI Layout [🔝](#readme)","UI Layout","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins","Windows Manager","游览","UI Layout","Tour","Form"],"readme":"![preview](vue-waterfall.jpg)\n\n# vue-waterfall\n\n[![Build Status](https://img.shields.io/travis/MopTym/vue-waterfall.svg?style=flat-square)](https://travis-ci.org/MopTym/vue-waterfall)\n[![Version](https://img.shields.io/npm/v/vue-waterfall.svg?style=flat-square)](https://www.npmjs.com/package/vue-waterfall)\n[![License](https://img.shields.io/npm/l/vue-waterfall.svg?style=flat-square)](LICENSE)\n\nA waterfall layout component for Vue.js .\n\nBranch [0.x (version 0.x.x)](https://github.com/MopTym/vue-waterfall/tree/0.x) is compatible with Vue 1 .\n\n## Demo\n\n- [Vertical line](http://app.moptym.com/vue-waterfall/demo/vertical-line.html)\n- [Horizontal line](http://app.moptym.com/vue-waterfall/demo/horizontal-line.html)\n- [Vertical line with grow](http://app.moptym.com/vue-waterfall/demo/vertical-line-with-grow.html)\n\n## Installation\n\n```shell\nnpm install --save vue-waterfall\n```\n\n## Usage\n\nVue-waterfall is a [UMD](https://github.com/umdjs/umd) module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, `Waterfall` will be registered as a global variable.\n\n### Import\n\n#### ES6\n\n```js\n/* in xxx.vue */\n\nimport Waterfall from 'vue-waterfall/lib/waterfall'\nimport WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'\n\n/*\n * or use ES5 code (vue-waterfall.min.js) :\n * import { Waterfall, WaterfallSlot } from 'vue-waterfall'\n */\n\nexport default {\n  ...\n  components: {\n    Waterfall,\n    WaterfallSlot\n  },\n  ...\n}\n```\n\n#### ES5\n\n```js\nvar Vue = require('vue')\nvar Waterfall = require('vue-waterfall')\n\nvar YourComponent = Vue.extend({\n  ...\n  components: {\n    'waterfall': Waterfall.waterfall,\n    'waterfall-slot': Waterfall.waterfallSlot\n  },\n  ...\n})\n```\n\n#### Browser\n\n```html\n\u003cscript src=\"path/to/vue/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/vue-waterfall/vue-waterfall.min.js\"\u003e\u003c/script\u003e\n```\n\n```js\nnew Vue({\n  ...\n  components: {\n    'waterfall': Waterfall.waterfall,\n    'waterfall-slot': Waterfall.waterfallSlot\n  },\n  ...\n})\n```\n\n### HTML structure\n\n```html\n\u003cwaterfall :line-gap=\"200\" :watch=\"items\"\u003e\n  \u003c!-- each component is wrapped by a waterfall slot --\u003e\n  \u003cwaterfall-slot\n    v-for=\"(item, index) in items\"\n    :width=\"item.width\"\n    :height=\"item.height\"\n    :order=\"index\"\n    :key=\"item.id\"\n  \u003e\n    \u003c!--\n      your component\n    --\u003e\n  \u003c/waterfall-slot\u003e\n\u003c/waterfall\u003e\n```\n\n## Props\n\n### waterfall\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth width=\"160\"\u003eName\u003c/th\u003e\n            \u003cth width=\"160\"\u003eDefault\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eline\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003ev\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003ev\u003c/code\u003e or \u003ccode\u003eh\u003c/code\u003e . Line direction.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eline-gap\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n            \u003ctd\u003eRequired. The standard space (px) between lines.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emin-line-gap\u003c/td\u003e\n            \u003ctd\u003e= line-gap\u003c/td\u003e\n            \u003ctd\u003eThe minimal space between lines.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emax-line-gap\u003c/td\u003e\n            \u003ctd\u003e= line-gap\u003c/td\u003e\n            \u003ctd\u003eThe maximal space between lines.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003esingle-max-width\u003c/td\u003e\n            \u003ctd\u003e= max-line-gap\u003c/td\u003e\n            \u003ctd\u003eThe maximal width of slot which is single in horizontal direction.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003efixed-height\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eFix slot height when line = \u003ccode\u003ev\u003c/code\u003e .\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003egrow\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n            \u003ctd\u003eNumber Array. Slot flex grow factors in horizontal direction when line = \u003ccode\u003ev\u003c/code\u003e . Ignore \u003ccode\u003e*-gap\u003c/code\u003e .\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ealign\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eleft\u003c/code\u003e or \u003ccode\u003eright\u003c/code\u003e or \u003ccode\u003ecenter\u003c/code\u003e . Alignment.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eauto-resize\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eReflow when window size changes.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003einterval\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e200\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe minimal time interval (ms) between reflow actions.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ewatch\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e{}\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eWatch something, reflow when it changes.\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### waterfall-slot\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth width=\"160\"\u003eName\u003c/th\u003e\n            \u003cth width=\"160\"\u003eDefault\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ewidth\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n            \u003ctd\u003eRequired. The width of slot.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eheight\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n            \u003ctd\u003eRequired. The height of slot.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eorder\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe order of slot, often be set to \u003ccode\u003eindex\u003c/code\u003e in \u003ccode\u003ev-for\u003c/code\u003e .\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ekey\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003e''\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003eThe unique identification of slot, required for transition.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emove-class\u003c/td\u003e\n            \u003ctd\u003e-\u003c/td\u003e\n            \u003ctd\u003eClass for transition. see \u003ca href=\"https://github.com/vuejs/vue-animated-list\" target=\"_blank\"\u003evue-animated-list\u003c/a\u003e .\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Transition\n\nInspired by [vue-animated-list](https://github.com/vuejs/vue-animated-list) , vue-waterfall supports moving elements with `translate` in transition, click on the [demo](http://app.moptym.com/vue-waterfall/demo/vertical-line.html) page to see it.\n\nvue-waterfall has not supported `\u003ctransition-group\u003e` in Vue 2 ( [#10](https://github.com/MopTym/vue-waterfall/issues/10) ) .\n\n![preview](shuffle.gif)\n\n## Events\n\n```js\nON ( 'reflow' ) {\n  reflow\n}\n// trigger reflow action: waterfallVm.$emit('reflow')\n```\n\n```js\nAFTER ( reflow ) {\n  emit 'reflowed'\n}\n// waterfallVm.$on('reflowed', () =\u003e { console.log('reflowed') })\n```\n\n## Reactivity\n\n```js\nWHEN ( layout property changes ) { /* line, line-gap, etc. */\n  reflow\n}\n```\n\n```js\nWHEN ( slot changes ) { /* add, remove, etc. */\n  reflow\n}\n```\n\n## License\n\nReleased under the [MIT](LICENSE) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMopTym%2Fvue-waterfall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMopTym%2Fvue-waterfall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMopTym%2Fvue-waterfall/lists"}