vue2项目使用瀑布流

瀑布流布局是常见的布局方式，因为需求原因前端需要在手机横屏的情况下展示瀑布流的布局方式。百度了瀑布流的布局原理和方法。开始是想用简单的css样式布局就是multi-column 多栏布局

但是这个布局只能满足从左到右。因为使用场景是手机横屏的情况下进行展示，所以这种方法是不可取的，

1 multi-column 多栏布局

只需要在父盒子上添加这两个属性

column-count ： 定义列数
column-gap ：列与列之间的间隔

子盒子添加 break-inside: avoid; // 不被截断 默认值是auto，会被截断

针对手机横屏我使用的是vue-masonry这个插件

因为项目是vue2 

2 vue-masonry这个插件

1 下载

npm install vue-masonry -g

2 main.js中引入

// 瀑布流
import {VueMasonryPlugin} from 'vue-masonry';
Vue.use(VueMasonryPlugin);

3 页面中直接使用

<div  class="main" >
          <div v-masonry class="tabContainer">
            <div cla