布局 瀑布流布局

用 vue 实现了一个瀑布流布局 ，注释写得超详细 ,直接上代码吧

<template>
    <div id="ref">
        <div class="fox" v-for="(item,index) in imgList" ref="box" :key="index">
            <img :src="item.pic" alt="" @click="handleimg(item)">
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            imgList:[],//获取图片数据
             heightArr:[], //这个数组用来存储第一行图片的高度
             imgHeight:'',
             index:''
        }
    },
    mounted(){
      this._getImg()
       
    },
    methods:{
        _getImg(){
            this.$axios.get("https://api.it120.cc/small4/shop/goods/list?page=1&pageSize=20").then(res=>{
                this.imgList=res.data
                //先获取数据 渲染完毕 用$nextTick()函数 获取元素的宽高
                this.$nextTick(()=>{
                    // 获取所有图片外层的容器 
                    let allImg=this.$refs.box
                    // 图片的宽度  
                     let imgWidth=allImg[0].offsetWidth
                    // 屏幕的宽度
                    let scrennWidth=document.body.clientWidth
                    // 获取列数  屏幕的宽/图片的宽度
                    let cols=parseInt(scrennWidth/imgWidth)
                    // 获取到的图片外层容器 循环遍历 
                   allImg.forEach((item,index)=>{
                    //    获取图片所有的高度
                       let imgHeight=item.offsetHeight
                    //  判断是否是第一行，如果下标小于列数 就是第一行
                       if(index<cols){
                        //    将第一行图片的高度存进heightArr[]数组里
                           this.heightArr[index]=imgHeight
                       }else{
                          //    查找数组中最小高度
                           let  minHeight=Math.min.apply(null,this.heightArr)
                        //   最小高度对应的索引下标
                         for(var i =0;i<=this.heightArr.length;i++){
                            //  循环遍历  如果数组中有这个最小高度 就把下标取出来
                             if(this.heightArr[i]==minHeight){
                                 this.index=i
                             }
                         }
                        //  加样式 
                        item.style.position="absolute" ,
                        item.style.left=this.index*imgWidth+'px'
                        item.style.top=minHeight+ 'px'
                       }
                    //    更新数组数组中 最小的高度
                        this.heightArr[this.index]+=imgHeight
                     
                   })
               
                    
                })
               
            })
             
        },
      
    },
}
</script>
<style scoped lang="scss">
  .fox{ 
      padding: 10px;
      float: left;
     }
     img{
         width: 200px;
         
     }
</style>

小小功能 轻轻松松就实现啦