vue实现瀑布流

<template>

   <div class="home">

     <!--

       scroll 事件在元素滚动条在滚动时触发。

       --->

      <div class="a1" >

         <div class="a2"

            v-for="(item,index) in list" :key="index"

           :style="{

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

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

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

              'background-color':  'red' ，

              'margin':2+'px'

           }"

         >

       

           {{item.ilm}}</div>

      </div>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data(){

    return{

      list:[]

    }

  },

  created(){

    //1.生成随机数

    let kop=[]

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

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

    }

    //2.定义初始的位置 外边距间隔为20px

    let ko=20

    let lo=20

    //3.计算每个方块的位置并添加到list里面

       for(var ilm of kop){//ilm是获取高度

          let x=20//这里宽高的长度xy

          let y=0

          if(ko<=lo){//这是第一列的盒子

           //这个是第一列盒子的排列 此时x是left y是 top  ilm是高度

              y=ko

              ko += ilm+20

          }else{//这是第二列的盒子

            //这个是第二列盒子的排列 此时x是left y是 top  ilm是高度

             x=290

             y=lo

             lo += ilm+20

          }

          this.list.push({x,y,ilm})

          //所以说可以抽象的看为一排盒子，当上面定义的初始位置  第一次做判断时，那么就做的是第一个盒子，此时

          //x left的边距不变，然后y的top要变化  还有高度也变化

          //而当走第二个时候，left 的x变远了，然后这时候变化也是边距  

          //然后再循环由于是随机数，所有可能是大于或等于，如果是大于 那么走下面的，那么第三次必然是小于，所以三个值又不同的用处

       }

    console.log(this.list)

  },

  methods:{

   

  }

}

</script>

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

<style scoped>

.a1{

width: 560px;

  height: 1000px;

  overflow: auto;

  position: relative;

  background-color: rgb(222,222,222)

}

.a2{

 width: 250px;

  position: absolute;

  border-radius: 10px;

}

</style>