https://github.com/bh-lay/vue-stick
一款基于 VUE 的瀑布流组件。 A waterfall flow component based on vue.js
https://github.com/bh-lay/vue-stick
stick vue waterfall waterfall-layout
Last synced: 10 months ago
JSON representation
一款基于 VUE 的瀑布流组件。 A waterfall flow component based on vue.js
- Host: GitHub
- URL: https://github.com/bh-lay/vue-stick
- Owner: bh-lay
- License: apache-2.0
- Created: 2019-05-30T05:56:09.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T00:24:24.000Z (over 3 years ago)
- Last Synced: 2025-04-18T10:05:56.656Z (about 1 year ago)
- Topics: stick, vue, waterfall, waterfall-layout
- Language: JavaScript
- Homepage: https://bh-lay.github.io/vue-stick/demo/
- Size: 348 KB
- Stars: 31
- Watchers: 1
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-stick
A waterfall flow component based on vue.js
一款基于 vue.js 的瀑布流组件。
### **demo:** [https://bh-lay.github.io/vue-stick/demo/](https://bh-lay.github.io/vue-stick/demo/)
### **实例 :** [http://bh-lay.com/blog](http://bh-lay.com/blog)
## 如何引入
您可以下载 `dist` 目录下的产出文件至您的项目中，用任何您希望使用的方式引入。
产出文件包含 umd 模块、ES 模块两个版本，您可以根据自己的项目自行选择。
也可以通过 npm 安装。
```bash
npm install -s vue-stick
```
引入 `vue-stick` 之后，您可以选择安装为 Vue 全局模块，也可以局部使用。
```javascript
var Stick = require('vue-stick')
// 全局注册
Vue.use(Stick)
// 局部注册
new Vue({
data: {},
components: {
Stick: Stick.component
}
})
```
## 如何使用
**template**
```vue
![]()
{{scope.data.title}}
{{scope.data.intro}}
```
**vue**
```javascript
{
data: {
list: [
{
"cover": "http://static.bh-lay.com/.../share.jpg",
"intro": "2018 年对于我来说是非...",
"title": "剧中人的2018年终总结"
},
{
"cover": "http://static.bh-lay.com/.../cover.jpg",
"intro": "再次见到合肥，在历经五年的沪漂之后...",
"title": "再见 · 合肥"
}
]
},
methods: {
loadMore: function () {
this.list.push({
"cover": "http://static.bh-lay.com/...yout.png",
"intro": "今天的分享主要围绕 可视化布局模块的一些...",
"title": "added by scroll 可视化布局模块开发分享"
})
}
}
}
```
## 参数
| 参数 | 类型 | 必填 | 默认值 | 解释 |
| ------------------- | ------ | ---- | :-------------: | :-------------------- |
| list | Array | 必填 | [] | 瀑布流数据列表 |
| columnWidth | Number | - | 280 | 卡片宽度 |
| columnSpacing | Number | - | 10 | 卡片间距 |
| loadTriggerDistance | Number | - | 1000 | 滚动加载距离边界值 |
| animationClass | String | - | 'stick-fade-in' | 卡片插入时的动画class |
> 说明：
>
> 因瀑布流的特殊性，请尽可能保证卡片內布局的稳定性。为响应可能的高度变化，本组件会延迟到第一张图片加载完成后再渲染。
>
> 该项目由原生瀑布流组件 [stick](https://github.com/bh-lay/stick) 演绎而成。