{"id":25706424,"url":"https://github.com/bh-lay/vue-stick","last_synced_at":"2025-09-07T00:43:45.149Z","repository":{"id":34912051,"uuid":"189354240","full_name":"bh-lay/vue-stick","owner":"bh-lay","description":"一款基于 VUE 的瀑布流组件。 A  waterfall flow component based on vue.js","archived":false,"fork":false,"pushed_at":"2023-03-03T00:24:24.000Z","size":356,"stargazers_count":31,"open_issues_count":9,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-18T10:05:56.656Z","etag":null,"topics":["stick","vue","waterfall","waterfall-layout"],"latest_commit_sha":null,"homepage":"https://bh-lay.github.io/vue-stick/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bh-lay.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-30T05:56:09.000Z","updated_at":"2024-12-13T05:13:08.000Z","dependencies_parsed_at":"2024-10-28T09:53:32.538Z","dependency_job_id":null,"html_url":"https://github.com/bh-lay/vue-stick","commit_stats":{"total_commits":28,"total_committers":3,"mean_commits":9.333333333333334,"dds":0.1428571428571429,"last_synced_commit":"26da02e480b252a9357408ff8e964b92a8d6f35c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bh-lay%2Fvue-stick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bh-lay%2Fvue-stick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bh-lay%2Fvue-stick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bh-lay%2Fvue-stick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bh-lay","download_url":"https://codeload.github.com/bh-lay/vue-stick/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251372471,"owners_count":21578965,"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":["stick","vue","waterfall","waterfall-layout"],"created_at":"2025-02-25T07:33:16.578Z","updated_at":"2025-04-30T12:03:42.797Z","avatar_url":"https://github.com/bh-lay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-stick\nA  waterfall flow component based on vue.js\n\n一款基于 vue.js 的瀑布流组件。\n\n### **demo:** [https://bh-lay.github.io/vue-stick/demo/](https://bh-lay.github.io/vue-stick/demo/)\n### **实例 :** [http://bh-lay.com/blog](http://bh-lay.com/blog)\n\n\n\n## 如何引入\n\n您可以下载 `dist` 目录下的产出文件至您的项目中，用任何您希望使用的方式引入。\n产出文件包含 umd 模块、ES 模块两个版本，您可以根据自己的项目自行选择。\n\n也可以通过 npm 安装。\n\n```bash\nnpm install -s vue-stick\n```\n\n引入 `vue-stick` 之后，您可以选择安装为 Vue 全局模块，也可以局部使用。\n\n```javascript\nvar Stick = require('vue-stick')\n// 全局注册\nVue.use(Stick)\n\n// 局部注册\nnew Vue({\n\tdata: {},\n\tcomponents: {\n\t\tStick: Stick.component\n\t}\n})\n```\n\n## 如何使用\n\n**template**\n\n```vue\n\u003cStick\n\t:list=\"list\"\n\t@onScrollEnd=\"loadMore\"\n\t\u003e\n  \u003ctemplate slot-scope=\"scope\"\u003e\n\t\t\u003cdiv class=\"card\"\u003e\n      \u003cimg v-if=\"scope.data.cover\" :src=\"scope.data.cover\"/\u003e\n      \u003ch2\u003e{{scope.data.title}}\u003c/h2\u003e\n      \u003cp\u003e{{scope.data.intro}}\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/Stick\u003e\n```\n\n**vue**\n\n```javascript\n{\n  data: {\n    list: [\n      {\n        \"cover\": \"http://static.bh-lay.com/.../share.jpg\",\n        \"intro\": \"2018 年对于我来说是非...\",\n        \"title\": \"剧中人的2018年终总结\"\n      },\n      {\n        \"cover\": \"http://static.bh-lay.com/.../cover.jpg\",\n        \"intro\": \"再次见到合肥，在历经五年的沪漂之后...\",\n        \"title\": \"再见 · 合肥\"\n      }\n    ]\n  },\n\tmethods: {\n    loadMore: function () {\n      this.list.push({\n        \"cover\": \"http://static.bh-lay.com/...yout.png\",\n        \"intro\": \"今天的分享主要围绕 可视化布局模块的一些...\",\n        \"title\": \"added by scroll 可视化布局模块开发分享\"\n      })\n    }\n  }\n}\n```\n\n## 参数\n\n| 参数                | 类型   | 必填 |     默认值      | 解释                  |\n| ------------------- | ------ | ---- | :-------------: | :-------------------- |\n| list                | Array  | 必填 |       []        | 瀑布流数据列表        |\n| columnWidth         | Number | -    |       280       | 卡片宽度              |\n| columnSpacing       | Number | -    |       10        | 卡片间距              |\n| loadTriggerDistance | Number | -    |      1000       | 滚动加载距离边界值    |\n| animationClass      | String | -    | 'stick-fade-in' | 卡片插入时的动画class |\n\n\n\u003e 说明：\n\u003e\n\u003e 因瀑布流的特殊性，请尽可能保证卡片內布局的稳定性。为响应可能的高度变化，本组件会延迟到第一张图片加载完成后再渲染。\n\u003e\n\u003e 该项目由原生瀑布流组件 [stick](https://github.com/bh-lay/stick) 演绎而成。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbh-lay%2Fvue-stick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbh-lay%2Fvue-stick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbh-lay%2Fvue-stick/lists"}