[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8799":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":15,"starSnapshotCount":15,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},8799,"vue-waterfall","MopTym\u002Fvue-waterfall","MopTym","A waterfall layout component for Vue.js",null,"Vue",2199,256,41,37,0,59.23,"MIT License",false,"master",true,[],"2026-06-12 04:00:41","![preview](vue-waterfall.jpg)\n\n# vue-waterfall\n\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Ftravis\u002FMopTym\u002Fvue-waterfall.svg?style=flat-square)](https:\u002F\u002Ftravis-ci.org\u002FMopTym\u002Fvue-waterfall)\n[![Version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-waterfall.svg?style=flat-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-waterfall)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Fvue-waterfall.svg?style=flat-square)](LICENSE)\n\nA waterfall layout component for Vue.js .\n\nBranch [0.x (version 0.x.x)](https:\u002F\u002Fgithub.com\u002FMopTym\u002Fvue-waterfall\u002Ftree\u002F0.x) is compatible with Vue 1 .\n\n## Demo\n\n- [Vertical line](http:\u002F\u002Fapp.moptym.com\u002Fvue-waterfall\u002Fdemo\u002Fvertical-line.html)\n- [Horizontal line](http:\u002F\u002Fapp.moptym.com\u002Fvue-waterfall\u002Fdemo\u002Fhorizontal-line.html)\n- [Vertical line with grow](http:\u002F\u002Fapp.moptym.com\u002Fvue-waterfall\u002Fdemo\u002Fvertical-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:\u002F\u002Fgithub.com\u002Fumdjs\u002Fumd) 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\u002F* in xxx.vue *\u002F\n\nimport Waterfall from 'vue-waterfall\u002Flib\u002Fwaterfall'\nimport WaterfallSlot from 'vue-waterfall\u002Flib\u002Fwaterfall-slot'\n\n\u002F*\n * or use ES5 code (vue-waterfall.min.js) :\n * import { Waterfall, WaterfallSlot } from 'vue-waterfall'\n *\u002F\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\u002Fto\u002Fvue\u002Fvue.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"path\u002Fto\u002Fvue-waterfall\u002Fvue-waterfall.min.js\">\u003C\u002Fscript>\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\">\n  \u003C!-- each component is wrapped by a waterfall slot -->\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  >\n    \u003C!--\n      your component\n    -->\n  \u003C\u002Fwaterfall-slot>\n\u003C\u002Fwaterfall>\n```\n\n## Props\n\n### waterfall\n\n\u003Ctable>\n    \u003Cthead>\n        \u003Ctr>\n            \u003Cth width=\"160\">Name\u003C\u002Fth>\n            \u003Cth width=\"160\">Default\u003C\u002Fth>\n            \u003Cth>Description\u003C\u002Fth>\n        \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n        \u003Ctr>\n            \u003Ctd>line\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>v\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>v\u003C\u002Fcode> or \u003Ccode>h\u003C\u002Fcode> . Line direction.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>line-gap\u003C\u002Ftd>\n            \u003Ctd>-\u003C\u002Ftd>\n            \u003Ctd>Required. The standard space (px) between lines.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>min-line-gap\u003C\u002Ftd>\n            \u003Ctd>= line-gap\u003C\u002Ftd>\n            \u003Ctd>The minimal space between lines.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>max-line-gap\u003C\u002Ftd>\n            \u003Ctd>= line-gap\u003C\u002Ftd>\n            \u003Ctd>The maximal space between lines.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>single-max-width\u003C\u002Ftd>\n            \u003Ctd>= max-line-gap\u003C\u002Ftd>\n            \u003Ctd>The maximal width of slot which is single in horizontal direction.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>fixed-height\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>Fix slot height when line = \u003Ccode>v\u003C\u002Fcode> .\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>grow\u003C\u002Ftd>\n            \u003Ctd>-\u003C\u002Ftd>\n            \u003Ctd>Number Array. Slot flex grow factors in horizontal direction when line = \u003Ccode>v\u003C\u002Fcode> . Ignore \u003Ccode>*-gap\u003C\u002Fcode> .\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>align\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>left\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>left\u003C\u002Fcode> or \u003Ccode>right\u003C\u002Fcode> or \u003Ccode>center\u003C\u002Fcode> . Alignment.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>auto-resize\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>true\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>Reflow when window size changes.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>interval\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>200\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>The minimal time interval (ms) between reflow actions.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>watch\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>{}\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>Watch something, reflow when it changes.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\n### waterfall-slot\n\n\u003Ctable>\n    \u003Cthead>\n        \u003Ctr>\n            \u003Cth width=\"160\">Name\u003C\u002Fth>\n            \u003Cth width=\"160\">Default\u003C\u002Fth>\n            \u003Cth>Description\u003C\u002Fth>\n        \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n        \u003Ctr>\n            \u003Ctd>width\u003C\u002Ftd>\n            \u003Ctd>-\u003C\u002Ftd>\n            \u003Ctd>Required. The width of slot.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>height\u003C\u002Ftd>\n            \u003Ctd>-\u003C\u002Ftd>\n            \u003Ctd>Required. The height of slot.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>order\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>0\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>The order of slot, often be set to \u003Ccode>index\u003C\u002Fcode> in \u003Ccode>v-for\u003C\u002Fcode> .\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>key\u003C\u002Ftd>\n            \u003Ctd>\u003Ccode>''\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd>The unique identification of slot, required for transition.\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>move-class\u003C\u002Ftd>\n            \u003Ctd>-\u003C\u002Ftd>\n            \u003Ctd>Class for transition. see \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-animated-list\" target=\"_blank\">vue-animated-list\u003C\u002Fa> .\u003C\u002Ftd>\n        \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n## Transition\n\nInspired by [vue-animated-list](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue-animated-list) , vue-waterfall supports moving elements with `translate` in transition, click on the [demo](http:\u002F\u002Fapp.moptym.com\u002Fvue-waterfall\u002Fdemo\u002Fvertical-line.html) page to see it.\n\nvue-waterfall has not supported `\u003Ctransition-group>` in Vue 2 ( [#10](https:\u002F\u002Fgithub.com\u002FMopTym\u002Fvue-waterfall\u002Fissues\u002F10) ) .\n\n![preview](shuffle.gif)\n\n## Events\n\n```js\nON ( 'reflow' ) {\n  reflow\n}\n\u002F\u002F trigger reflow action: waterfallVm.$emit('reflow')\n```\n\n```js\nAFTER ( reflow ) {\n  emit 'reflowed'\n}\n\u002F\u002F waterfallVm.$on('reflowed', () => { console.log('reflowed') })\n```\n\n## Reactivity\n\n```js\nWHEN ( layout property changes ) { \u002F* line, line-gap, etc. *\u002F\n  reflow\n}\n```\n\n```js\nWHEN ( slot changes ) { \u002F* add, remove, etc. *\u002F\n  reflow\n}\n```\n\n## License\n\nReleased under the [MIT](LICENSE) License.\n","vue-waterfall 是一个用于 Vue.js 的瀑布流布局组件。它支持垂直和水平方向的瀑布流布局，并且可以通过设置 `line-gap` 属性来定义行间距，从而实现灵活多变的内容展示效果。该组件采用 UMD 模块化设计，既可以在 CommonJS 和 AMD 环境中作为模块使用，也可以在非模块化环境中直接通过全局变量访问。适用于需要动态加载图片、文章列表等场景，能够有效提升页面美观度与用户体验。",2,"2026-06-11 03:19:49","top_language"]