vue实现简单瀑布流布局（vue-stick）

vue-stick

github地址：https://github.com/bh-lay/vue-stick
一款基于 vue.js 的瀑布流组件。
demo: https://bh-lay.github.io/vue-stick/demo/
实例 : http://bh-lay.com/blog

注意：我这里主要是移动端，当然，你也可以在PC端使用，根据个人需求
npm 安装

npm install -s vue-stick

全局引用：

import Stick from 'vue-stick'
Vue.use(Stick);

在需要的页面中引用

<!-- html -->
          <Stick :list="caves" :columnWidth="columnWidth" :columnSpacing="columnSpacing">
            <template slot-scope="scope">
              <div >
				<!-- 你需要展示的内容布局 -->
              </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>

参数

说明：
因瀑布流的特殊性，请尽可能保证卡片內布局的稳定性。为响应可能的高度变化，本组件会延迟到第一张图片加载完成后再渲染。