动态瀑布流布局的图片墙

要实现动态瀑布流布局的图片墙：要做到两点：
一.实现瀑布流的图片墙，
二.使用函数节流监听window的resize事件
首先：实现瀑布流的图片墙，网上有各种各样式的实现，但是纯css的实现，总是有些bug，不容易控制，所以我使用js进行控制。
它的原理是：首先使用浮动布局，图片可浮动。具体结构：


这时除了第一行，其他的图片的都有较大的间距。剩下的工作需要js来完成：
①声明变量保存图片墙容器的dom object，声明变量保存图片墙每个图片容器的dom object，声明变量保存第一行图片容器的属性
②计算每行图片的数目，第一行每个图片容器的左边的距离，以及第一行每张图片容器的高度（因为除第一行外都是使用的绝对定位）
③开始计算剩余图片容器的位置，(主要包括图片容器的left和top,每设置一个图片容器的位置，那么就更新第一行图片容器数组的top值，因为判断下张图片容器的位置就是找上一行高度最小的图片容器，在它的下方放置);
**注意：
因为是动态的，所以当窗口变动时，第一行的图片容器数量会改变，所以原来不在第一行之列的元素会进入到第一行，但是此时它们依然是绝对定位，所以要清除绝对定位。
另外一点，如果你的html的font-size使用函数节流，此时瀑布流布局的图片墙也要用，要注意this的指向，我因为使用了面向对象，所以瀑布流布局的图片墙使用节流时要指向我的对象。**
**
完整代码：

<template>
    <ul class="photos-wall clear" ref="photosWall">
        <li class="photo" ref="photo" v-for="img in images" :key="img.index"><img :src="img.src" alt="瀑布流图片" /></li>
    </ul>
</template>

<script type="text/javascript">
    import Base from '../assets/js/base.js'

    export default {
        data() {
            return {
                images: [],
                waterfullBoxObj: null,
                waterfullElemObjs: null
            }
        },
        created() {
            this.init();
        },
        mounted() {
            this.initGetDomObj();
        },
        methods: {
            init: function () {
      // 一切数据和函数的入口
                this.initBaseDatas();
            },
            initBaseDatas: function () {
      //初始化data中的所有数据
                this.initImagesData()
            },
            initImagesData: function () {
      //初始化data中images属性的初始值
                let images = [
                    {
   'index': 1, 'src': '../../static/imgs/waterfull/hy1.jpeg'},
                    {
   'index': 2, 'src': '../../static/imgs/waterfull/hy2.jpg'},
                    {
   'index': 3, 'src': '../../static/imgs/waterfull/hy3.jpg'},
                    {
   'index': 4, 'src':