[项目篇]vue3+ts 移动端和pc端双端实现瀑布流 - 第六天

<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)
复制代码

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

<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>
复制代码