实现效果

（最近加班有点严重，睡眠不足，所以没有认真的排版，效果是出来了。。将就一下吧）

这是移动端和pc端都可以实现的，基于javascript，进行高度捕获差值去实现的。

html部分

<template>
  <div class="row f12" id="app-mains">
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <p class="card-text">This is a short card.</p>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <p class="card-text">This is a short card.</p>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <p class="card-text">This is a short card.</p>
          </div>
        </div>
      </div>
  </div>
</template>
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5de0a5613fb940768aa9314759dc7710~tplv-k3u1fbpfcp-watermark.image)
复制代码

css部分

由于这本来是在公司实现的，公司的代码就不展示了，处理了一下，变成移动端了，可是是基于bootstrap5.0去实现的，有点懒

<style scoped>
#app-mains{position: relative}
</style>
<style>
  .col-6{padding-left: 0!important;padding-right: 0!important;margin-top: 0!important;}
</style>
复制代码

js部分

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
interface waterfallFlow {
  waterfallFlowHeight: Array
}
export default {
  name: 'demo',
  setup() {
      const state: waterfallFlow = reactive({
          waterfallFlowHeight: [0, 0]
      })
      const waterfallFlowFun = () => {
          const dom = document.querySelectorAll('.col-6')
          dom.forEach((item: any) => {
              item.style.position = 'absolute'
              const minIndex = filterMin()
              item.style.top = state.waterfallFlowHeight[minIndex] + 10 + 'px'
              item.style.left = minIndex * (100 / 2) + '%'
              state.waterfallFlowHeight[minIndex] += item.querySelector('.card').offsetHeight + 10
          })
      }
      const filterMin = () => {
          const min = Math.min.apply(null, state.waterfallFlowHeight)
          return state.waterfallFlowHeight.indexOf(min)
      }
      const _isMobile = () => {
          let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
          return flag
      }
      onMounted(() => waterfallFlowFun())
  }
}
</script>
复制代码

讲解：

waterfallFlowHeight 这个变量，如果你想两行的瀑布流，这里数据就两个数据，如果三行就三个，以此类推

filter这个函数，是用了Math.min.apply去取最小值（Math.max.apply是取最大值）这个函数取到了上一行的高度最小值

_isMobile() 这个函数，是用来判断pc端还是web端。由于我是做响应式，在移动端是不需要这个特效的，所以我只判断在pc端实现