vue3.0瀑布流（vue-grid-layout）

vue-grid-layout是一个vue的可拖拽的瀑布流布局组件，并提供相应的事件进行自定义操作。而且布局可以存储和再展现。

安装：

npm install --save vue-grid-layoutcnpm

特点：

元素可拖动
元素可调整大小
边界检查拖动和调整大小
可以添加或删除窗口小部件而无需重建网格
布局可以序列化和恢复
自动RTL支持（调整大小不适用于2.2.0上的RTL）
github地址：https://github.com/jbaysolutions/vue-grid-layout

template

<div class="vueGridLayout">
    <div class="board" style="width: 100%">
      <div class="home">
        <grid-layout
          :layout="layoutData"
          :col-num="2"
          :row-height="layoutHeight"
          :is-draggable="dialogVisible"
          :is-resizable="dialogVisible"
          :is-mirrored="false"
          :vertical-compact="true"
          :margin="[10, 10]"
          :use-css-transforms="true"
        >
          <grid-item
            v-for="(item,index) in layoutData"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.i"
          >
            <img class="img_cl" :src="item.imgSrc" />
            {{index}}
          </grid-item>
        </grid-layout>
      </div>
    </div>
  </div>

script

import { GridLayout, GridItem } from "vue-grid-layout";
import layoutData from "@/assets/data/layoutData.json";
export default {
  name: "vueGridLayout",
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 4, h: 2, i: 0 } //数据格式
      ],
      // 布局数据
      layoutData: [],
      layoutHeight: 130,
      layoutConfig: {
        height: 330, // 默认高度
        dialogVisible: false // 是否可拖拽或改变大小
      },
    };
  },
  components: {
    GridLayout,
    GridItem
  },
  methods: {
    init() {
      let mainData = [];
      if (layoutData.mainData.length > 0) {
        layoutData.mainData.forEach(element => {
          if (element.imgSrc != "") {
            element.imgSrc = require("../assets/image/"+element.imgSrc);
            mainData.push(element)
          }
        });
      }
      this.layoutData = mainData;
    }
  },
  created() {
    this.init();
  }
};

css

 .vue-grid-item {
  background: #eeeef1;
}
.img_cl {
  width: 100%;
  height: 100px;
}

layoutData.json

```javascript
{
    "mainData": [
      {
        "x": 0,
        "y": 0,
        "w": 1,
        "h": 1,
        "i": "0",
        "imgSrc":"1.jpg",
      },
      {
        "x": 0,
        "y": 1,
        "w": 1,
        "h": 1,
        "i": "1",
        "imgSrc":"2.jpg"
      },
      {
        "x": 0,
        "y": 2,
        "w": 1,
        "h": 1,
        "i": "2",
        "imgSrc":"3.jpg"
      },
      {
        "x": 0,
        "y": 3,
        "w": 1,
        "h": 1,
        "i": "3",
        "imgSrc":"6.jpg"
      },
      {
        "x": 1,
        "y": 0,
        "w": 1,
        "h": 1,
        "i": "4",
        "imgSrc":"5.jpg"
      },
      {
        "x": 1,
        "y": 1,
        "w": 1,
        "h": 1,
        "i": "5",
        "imgSrc":"6.jpg"
      },
      {
        "x": 1,
        "y": 2,
        "w": 1,
        "h": 1,
        "i": "6",
        "imgSrc":"2021895.jpg"
      },
      {
        "x": 1,
        "y": 3,
        "w": 1,
        "h": 1,
        "i": "7",
        "imgSrc":"2021895.jpg"
      },
      {
        "x": 2,
        "y": 0,
        "w": 1,
        "h": 1,
        "i": "8",
        "imgSrc":"6.jpg"
      },
      {
        "x": 2,
        "y": 1,
        "w": 1,
        "h": 1,
        "i": "9",
        "imgSrc":"1.jpg"
      },
      {
        "x": 2,
        "y": 2,
        "w": 1,
        "h": 1,
        "i": "10",
        "imgSrc":"2.jpg"
      },
      {
        "x": 2,
        "y": 3,
        "w": 1,
        "h": 1,
        "i": "11",
        "imgSrc":"3.jpg"
      },
      {
        "x": 3,
        "y": 0,
        "w": 1,
        "h": 1,
        "i": "12",
        "imgSrc":"5.jpg"
      },
      {
        "x": 3,
        "y": 1,
        "w": 1,
        "h": 1,
        "i": "13",
        "imgSrc":"5.jpg"
      },
      {
        "x": 3,
        "y": 2,
        "w": 1,
        "h": 1,
        "i": "14",
        "imgSrc":"2023491.jpg"
      },
      {
        "x": 3,
        "y": 3,
        "w": 1,
        "h": 1,
        "i": "15",
        "imgSrc":"2023491.jpg"
      },
      {
        "x": 4,
        "y": 0,
        "w": 1,
        "h": 1,
        "i": "16",
        "imgSrc":"2023491.jpg"
      },
      {
        "x": 4,
        "y": 1,
        "w": 1,
        "h": 1,
        "i": "17",
        "imgSrc":"1.jpg"
      },
      {
        "x": 4,
        "y": 2,
        "w": 1,
        "h": 1,
        "i": "18",
        "imgSrc":"4.jpg"
      },
      {
        "x": 4,
        "y": 3,
        "w": 1,
        "h": 1,
        "i": "19",
        "imgSrc":"4.jpg"
      }
    ]
  }

运行后效果：