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

一、安装依赖

import Stick from ‘vue-stick’

二、全局引入：mian.js中写入

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

三、需要的页面引用

<!-- 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>

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