Implementation effect

(Recently, I have been working overtime and lack of sleep, so I didn’t typeset seriously, and the effect is out. Make do)

This can be achieved on both mobile and PC sides, based on javascript, by highly capturing the difference.

HTML part

<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)Copy the code

The CSS part

Because this was originally implemented in the company, the company’s code is not shown, processed, into a mobile terminal, but is based on bootstrap5.0 to achieve, a little lazy

<style scoped> #app-mains{position: relative} </style> <style> .col-6{padding-left: 0! important; padding-right: 0! important; margin-top: 0! important; } </style>Copy the code

Js part

<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>Copy the code

Explanation:

The waterfallFlowHeight variable, if you want a waterfall flow of two rows, you have two rows, three rows, and so on

The filter function minimizes the height of the previous row using math.min. apply

The _isMobile() function is used to determine whether it is on the PC or the Web. Since I’m reactive, I don’t need this effect on mobile, so I’m just going to do it on PC

At the end

Do weigh in hand wrap up work, have don’t understand although ask, I am free will reply of

Big guys, interested can pay attention to my public number duck, now or single digit, wronged…

Lazy people, do not want to map, hope to help you

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together

Narrative:

  • 12 ~ 18K front-end interview will ask what?
  • The shift from outsourcing to self-employment | 2021 mid-year summary

Technology,

Chaotic series

  • Uniapp Configures ios Universal Link and associate Domains

Vue series

  • The same login and registration interface? Teach you to do a cool!
  • Vue3’s setup and Ref syntax
  • Provide and inject vue3
  • Vue3 + vite + vant + typescript – Day 1
  • Vue3 + TS Encapsulates request request, storage cache, and Config request information. – The next day
  • Vue3 + TS Package bottom Tabbar – Day 3
  • Vue3 + TS Canvas for Bezier curve wave effects – Day 4
  • Vue3 + TS Today understand custom hooks – Day 5

The typescript series

  • On day one, data types and vscode work with Typescript
  • The next day, interface and Readonly properties
  • Typescript Day 3 – Functions
  • Typescript Day 4 – Type inference, joint types, and type assertions
  • Day 5 – Classes and interfaces
  • Day 6 – Generics/generic constraints/Generics with classes and interfaces
  • Typescript Day 7 – Type aliases and cross types
  • Day 8 – Declaring files, built-in types

The react – native series

  • React-native lifecycle details
  • [React-native]JSX and RN styles and differences from the Web
  • [React -native] Mobx [React -native] Mobx [React -native] Mobx