{"id":16974005,"url":"https://github.com/tsuk1ko/vue-flex-waterfall","last_synced_at":"2025-04-19T13:57:06.902Z","repository":{"id":37527580,"uuid":"260738014","full_name":"Tsuk1ko/vue-flex-waterfall","owner":"Tsuk1ko","description":"🌊 A horizontal sorting waterfall layout component for Vue.js, realized by flex layout. 一个使用 flex 布局实现的横向排序瀑布流 Vue 组件","archived":false,"fork":false,"pushed_at":"2024-08-26T02:56:04.000Z","size":706,"stargazers_count":57,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T05:49:15.868Z","etag":null,"topics":["componen","flex","vue","waterfall"],"latest_commit_sha":null,"homepage":"https://tsuk1ko.github.io/vue-flex-waterfall/","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/Tsuk1ko.png","metadata":{"files":{"readme":"README-ZH.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-02T17:22:26.000Z","updated_at":"2025-04-11T13:11:18.000Z","dependencies_parsed_at":"2024-08-26T03:56:21.490Z","dependency_job_id":"a545b818-7b27-4490-9d36-4391213a6c87","html_url":"https://github.com/Tsuk1ko/vue-flex-waterfall","commit_stats":{"total_commits":47,"total_committers":3,"mean_commits":"15.666666666666666","dds":0.04255319148936165,"last_synced_commit":"ed4e11203ee57e748a7aa453aecbe5ae2b9fb182"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tsuk1ko%2Fvue-flex-waterfall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tsuk1ko%2Fvue-flex-waterfall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tsuk1ko%2Fvue-flex-waterfall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tsuk1ko%2Fvue-flex-waterfall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tsuk1ko","download_url":"https://codeload.github.com/Tsuk1ko/vue-flex-waterfall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249708477,"owners_count":21313941,"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":["componen","flex","vue","waterfall"],"created_at":"2024-10-14T01:04:18.552Z","updated_at":"2025-04-19T13:57:06.878Z","avatar_url":"https://github.com/Tsuk1ko.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-flex-waterfall\n\n[![Version](https://img.shields.io/npm/v/vue-flex-waterfall.svg?style=flat-square)](https://www.npmjs.com/package/vue-flex-waterfall)\n[![License](https://img.shields.io/npm/l/vue-flex-waterfall.svg?style=flat-square)](LICENSE)\n\n用 flex 实现的横向排序的瀑布流布局 Vue 3 组件\n\n原理见 [纯 CSS 实现横向排序的瀑布流式布局](https://jessieji.com/2019/pure-css-masonry)\n\n\u003e 如果你使用 Vue 2，那么请使用 [v1](https://github.com/Tsuk1ko/vue-flex-waterfall/tree/v1)\n\n## Demo\n\n[Vue Flex Waterfall Demo](https://tsuk1ko.github.io/vue-flex-waterfall/)\n\n[Demo 源码](src/App.vue)\n\n## 安装\n\n### 需求\n\nVue ^3.0.0\n\n### Node\n\n```bash\nnpm i vue-flex-waterfall\n```\n\n### 浏览器\n\n#### UNPKG\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-flex-waterfall@2\"\u003e\u003c/script\u003e\n```\n\n#### jsDelivr\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-flex-waterfall@2\"\u003e\u003c/script\u003e\n```\n\n## 使用\n\n```vue\n\u003ctemplate\u003e\n  \u003cVueFlexWaterfall\n    align-content=\"center\"\n    col=\"4\"\n    col-spacing=\"16\"\n    :break-at=\"{ 900: 3, 600: 2, 300: 1 }\"\n  \u003e\n    \u003c!-- items --\u003e\n  \u003c/VueFlexWaterfall\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { VueFlexWaterfall } from 'vue-flex-waterfall';\n\u003c/script\u003e\n```\n\n## 参数\n\n### align-content\n\n类型：`String`\n\n默认值：`undefined`\n\n等同于容器的 *align-content* CSS 变量\n\n[MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content)\n\n### height\n\n类型：`Number | String`\n\n默认值：`undefined`\n\n你可以手动指定容器高度，当不指定时，会自动计算高度\n\n给定一个数字时其单位为 *px*\n\n### col\n\n类型：`Number | String`\n\n默认值：`1`\n\n默认列数，使用 `break-at` 参数可以指定不同宽度下的列数\n\n### col-spacing\n\n类型：`Number | String`\n\n默认值：`0`\n\n列间距，给定一个数字时其单位为 *px*，请注意其表现与 `align-content` 有关\n\n### break-at\n\n类型：`Object`\n\n默认值：`{}`\n\n给定一个对象来指定不同宽度下的列数，例如 `{ 900: 3 }` 则表示当宽度 \u003c= 900px 时将会变为 3 列\n\n### break-by-container\n\n类型：`Boolean`\n\n默认值：`false`\n\n为`true`时，`break-at` 将使用瀑布流容器宽度，而不是 window 宽度\n\n## 事件\n\n### order-updated\n\n插槽中元素的 `order` 属性被更新后触发\n\n## 方法\n\n### updateOrder\n\n调用该方法可以手动触发 `order` 更新\n\n如何调用组件方法：见 Vue 文档 - [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref)\n\n## 提示\n\n1. 你可以通过给瀑布流内元素设置 `margin-bottom` 样式来控制其垂直间距\n2. 你可以通过设置组件的 `align-content` 参数来改变列对齐方式\n3. 如果瀑布流内有图片等会因加载或内容更新导致内容高度变化的元素，请在高度变动后重新调用 `updateOrder()`，或提前固定元素大小\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsuk1ko%2Fvue-flex-waterfall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsuk1ko%2Fvue-flex-waterfall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsuk1ko%2Fvue-flex-waterfall/lists"}