The vertical gap of the elements are different.

[ihaichao]

trafficstars

As the picture above shows, the height of the element bigger, the vertical gap of the element bigger. Core code is below:

waterfall(
    :line-gap="260",
    :watch="list",
)
    waterfall-slot(
         v-for="(card, index) in list",
         :key="card.user.uid",
         :width="waterfallWidth",
         :height="waterfallHeight",
         :order="index"
     )
        canvas-card

I have saw the source code of vue-waterfall. I think the code of calculating position is below, but can't understand some code.

function reflow () {
  if (!this.$el) { return }
  let width = this.$el.clientWidth
  let metas = this.$children.map((slot) => slot.getMeta())
  metas.sort((a, b) => a.order - b.order)
  console.log('reflow-metas', metas)
  this.virtualRects = metas.map(() => ({}))  // can't understand
  console.log('virtualRects', this.virtualRects)
  calculate(this, metas, this.virtualRects)
  setTimeout(() => {
    if (isScrollBarVisibilityChange(this.$el, width)) {
      calculate(this, metas, this.virtualRects)
    }
    this.style.overflow = 'hidden'
    render(this.virtualRects, metas)
    this.$emit('reflowed', this)
  }, 0)
}

I print some data on the console, I don't konw why the this.virtualRects is shown as below:

Could you give me some advice?

[YDSS]

@ihaichao you should focus on where to use this.virtualRects. this.virtualRects is a variable to store all of waterfall-slot's rect info.

Where you can't understand this.virtualRects = metas.map(() => ({})) is just for initializing this.virtualRects