vue-grid-layout是一个功能强大的瀑布流布局组件。支持用户拖拽和对改变元素大小，并提供相应的事件进行自定义操作。而且布局可以存储和再展现。

vue-grid-layout安装

npm install --save vue-grid-layout

使用

//script标签下
import { GridLayout,GridItem } from 'vue-grid-layout'

//export default
data(){
    return{
        layout:[
            {"x":0,"y":0,"w":4,"h":2,"i":0} //数据格式
        ]
    }
},
components: {
    GridLayout,
    GridItem
}

参数

参数                  类型       默认值      说明
autoSize            Boolean     true        是否根据内容确定容器的高度
colNum              Number      12          列数
rowHeight           Number      150         行高
maxRows             Number      Infinity    最大的行高
margin              Array       [10, 10]    两个可移动元素间的距离
isDraggable         Boolean     true        是否支持推拽
isResizable         Boolean     true        是否支持改变大小
usecssTransforms    Boolean     true        是否使用自定义的过渡效果
verticalCompact     Boolean     true        是否使用verticalCompact布局
layout              Array       -           布局位置

链接: https://fly63.com/nav/1442