vue瀑布流

<style>
  .contain {position: relative;}
  .item {position: absolute;}
</style>

<template>
  <div class="contain">
    <div class="item" v-for="(item,index) in pbList" :key="index" :style="item">
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    pbList:[
      {
        height: '200px',
        border: '1px solid'
      },
      {
        height:'50px',
        border: '1px solid'
      },{
        height: '200px',
        border: '1px solid'
      },
      {
        height:'50px',
        border: '1px solid'
      },{
        height: '200px',
        border: '1px solid'
      },
      {
        height:'50px',
        border: '1px solid'
      },{
        height: '200px',
        border: '1px solid'
      },
      {
        height:'50px',
        border: '1px solid'
      },{
        height: '200px',
        border: '1px solid'
      },
      {
        height:'50px',
        border: '1px solid'
      },{
        height: '200px',
        border: '1px solid'
      },
      {
        height:'50px',
        border: '1px solid'
      },{
        height: '200px',
        border: '1px solid'
      },
      {
        height:'50px',
        border: '1px solid'
      }]
  }
},
methods: {
  waterFall(wrapIdName,contentIdName,columns=4,columnGap =20,rowGap=20){
    const  wrapContentWidth = document.querySelector(wrapIdName).offsetWidth - 8
    console.log(wrapContentWidth);
    const whiteArea = (columns -1) * columnGap
    const contentWidth = parseInt((wrapContentWidth - whiteArea)/columns)
    const contentList = document.querySelectorAll(contentIdName)
    const lineHeightList = []
    contentList.forEach((item,index)=>{
      item.style.width = contentWidth + 'px'
      const height = contentList[index].clientHeight
      console.log(height);
      if(index<columns){
        contentList[index].style.top = 0
        contentList[index].style.left = (contentWidth + columnGap) * index + 'px'
        lineHeightList.push(height)
      }
      else{
        console.log('----------');
        let minHeight = Math.min(...lineHeightList)
        console.log(minHeight);
        console.log(lineHeightList);
        let i = lineHeightList.findIndex(item => item === minHeight)
        console.log(i);
        contentList[index].style.top = minHeight + rowGap + 'px'
        contentList[index].style.left = (contentWidth + columnGap) * i + 'px'
        lineHeightList[i] += (height + columnGap)
      }
    })
  }
},
mounted() {
  this.waterFall('.contain','.item')
  window.onresize = () => {
    return (()=>{
      console.log('resize');
      this.waterFall('.contain','.item')
    })()
  }
},
}
</script>