Vue瀑布流插件的使用示例

<template> <div class="container">  <w-f-column itemW="200">   <template slot-scope="{columnNum,columnIndex}">    <water-follow :list="list" :columnNum="columnNum" :columnIndex="columnIndex">     <template slot-scope="{item,index}">      <div class="my-box" :style="{height:item+'px'}">{{item}}-{{index}}</div>     </template>    </water-follow>   </template>  </w-f-column> </div></template><script>import WFColumn from '../waterFollow/WFColumn'import WaterFollow from '../waterFollow/WaterFollow'export default { name: 'page', components: {WaterFollow, WFColumn}, data () {  return {   list: []  } }, created () {  // 有初始数据  for (let i = 0; i < 50; i++) {   this.list.push(Math.floor(Math.random() * 301 + 200))  } }, mounted () {  // 模拟网络请求  // window.setTimeout(() => {  //  this.list = []  //  for (let i = 0; i < 50; i++) {  //   this.list.push(Math.floor(Math.random() * 301 + 200))  //  }  // }, 1000)  // -- 分割 --  // 模拟数据不断变化  // window.setInterval(() => {  //  this.list = []  //  for (let i = 0; i < 50; i++) {  //   this.list.push(Math.floor(Math.random() * 301 + 200))  //  }  // }, 1000) }}</script><style scoped lang="scss"> .container{  width: 100%;  background: gray;  .my-box{   width: 200px;   background: #000;   margin-bottom: 20px;   color: #fff;  } }</style>

<template> <div class="wf-container">  <div class="wf-column" v-for="(item,index) in columnNum" :key="'column-'+index" :name="index">   <slot :columnNum="columnNum" :columnIndex="index"></slot>  </div> </div></template><script>export default { name: 'WFColumn', props: ['itemW'], data () {  return {   columnNum: 0  } }, created () {  this.columnNum = Math.floor(document.body.clientWidth / this.itemW)  window.onresize = () => {   this.columnNum = Math.floor(document.body.clientWidth / this.itemW)  } }}</script><style scoped lang="scss">.wf-container{ width: 100%; display: flex; .wf-column{  flex: 1; }}</style>

<template> <div>  <div v-for="(item,index) in list" :key="'item-'+index" class="item" :id="'card-'+columnIndex+'-'+index" v-if="load?(record[index].index===columnIndex):true">   <slot :item="item" :index="index"></slot>  </div> </div></template><script>export default { name: 'WaterFollow', props: ['list', 'columnNum', 'columnIndex'], data () {  return {   column: 0,   record: [],   load: false,   update: false  } }, methods: {  calculateColumn () {   let cList = []   for (let i = 0; i < this.columnNum; i++) {    cList.push(0)   }   for (let i = 0; i < this.record.length; i++) {    let index = 0    for (let j = 0; j < cList.length; j++) {     if (cList[index] > cList[j]) {      index = j     }    }    cList[index] += this.record[i].height    this.record[i].index = index   }  },  recordInit () {   for (let i = 0; i < this.list.length; i++) {    this.record.push({index: -1, height: -1})   }  },  initHeightData () {   for (let i = 0; i < this.list.length; i++) {    if (document.getElementById('card-' + this.columnIndex + '-' + i)) {     let h = document.getElementById('card-' + this.columnIndex + '-' + i).offsetHeight     this.record[i].height = h    }   }  } }, beforeCreate () {}, created () {  this.load = false  this.recordInit() }, beforeMount () {}, mounted () {  this.initHeightData()  this.calculateColumn()  this.load = true }, beforeUpdate () {}, updated () {  if (this.update) {   this.initHeightData()   this.calculateColumn()   this.update = false   this.load = true  } }, beforeDestroy () {}, destroyed () {}, watch: {  columnNum (curr, old) {   this.calculateColumn()  },  list (curr, old) {   console.log('list change')   this.recordInit()   this.load = false   this.update = true  } }}</script><style scoped></style>