Vue-stick plugin
github address: https://github.com/bh-lay/vue-stick
A waterfall component based on vue.js.
demo: https://bh-lay.github.io/vue-stick/demo/
Example: http://bh-lay.com/blog
1. Installation dependencies
import Stick from ‘vue-stick’
2. Global introduction: written in mian.js
import Stick from ‘vue-stick’
Vue.use(Stick);
3. Required page references
<!-- html -->
<Stick :list="caves" :columnWidth="columnWidth" :columnSpacing="columnSpacing">
<template slot-scope="scope">
<div >
{
{scope.data.name}}
<!-- 你需要展示的内容布局 -->
</div>
</template>
</Stick>
//js
<script>
export default {
components: {
},
data() {
return {
columnWidth: '',
columnSpacing: 10,
}
},
created() {
// 计算宽度
this.columnWidth = (350 * 0.5 * (document.documentElement.clientWidth / 375))
},
mounted() {
},
methods: {
}
}
</script>
Note:
Due to the particularity of the waterfall, please try to ensure the stability of the card layout as much as possible. In response to possible height changes, this component will delay rendering until the first image has loaded.