关于瀑布图的代码 可以多参考参考

<template>

   <div class="home">

     <div v-for="(item,index) in list" :key="index" :style="{

       

          'height':item.mu+'px',

          'left':item.x+'px',

          'right':item.y+'px',

          'background':'red',

          'margin':50+'px'

     }"></div>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data(){

    return{

        list:[]

    }

  },

  created(){

   //生成随机数

    var lp=[]

    for(var i=0;i<100;i++){

      lp.push(Math.floor(Math.random()*10)*10+100)

    }

     

     //给个margin的距离

     var left=20

     var right=20

     for(var mu of lp){

       var fx=20

       var ky=0

        if(left>=right){

            fx=mu+left

           

            left+=mu+20

        }else{

            fx=left

            ky =290

            right+=mu+20

        }

        this.list.push({fx,ky,mu})

     }

     

  },

  methods:{

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.home{

  width: 500px;

}

</style>