vue 3 父子传参Demo 流式布局 手写

Posted 2023-03-05 安果移不动

成品代码在最下面

父布局 App.vue

<template>
  <p>adajk </p>

  <WaterFull :list="list"></WaterFull>
  <p>adajk </p>
</template>

<style scoped>
#app, html, body 

  height: 100%;


* 
  padding: 0;
  margin: 0;


</style>

<script setup lang="ts">


import WaterFull from "./components/water-full.vue";


const list = [
  
    height: 300,
    background: 'red'
  ,
  
    height: 400,
    background: 'pink'
  ,
  
    height: 500,
    background: 'blue'
  ,
  
    height: 200,
    background: 'green'
  ,
  
    height: 300,
    background: 'gray'
  ,
  
    height: 400,
    background: '#CC00FF'
  ,
  
    height: 200,
    background: 'black'
  ,
  
    height: 100,
    background: '#996666'
  ,
  
    height: 500,
    background: 'skyblue'
  ,
  
    height: 300,
    background: '#993366'
  ,
  
    height: 100,
    background: '#33FF33'
  ,
  
    height: 400,
    background: 'skyblue'
  ,
  
    height: 200,
    background: '#6633CC'
  ,
  
    height: 300,
    background: '#666699'
  ,
  
    height: 300,
    background: '#66CCFF'
  ,
  
    height: 300,
    background: 'skyblue'
  ,
  
    height: 200,
    background: '#CC3366'
  ,
  
    height: 200,
    background: '#CC9966'
  ,
  
    height: 200,
    background: '#FF00FF'
  ,
  
    height: 500,
    background: '#990000'
  ,
  
    height: 400,
    background: 'red'
  ,
  
    height: 100,
    background: '#999966'
  ,
  
    height: 200,
    background: '#CCCC66'
  ,
  
    height: 300,
    background: '#FF33FF'
  ,
  
    height: 400,
    background: '#FFFF66'
  ,
  
    height: 200,
    background: 'red'
  ,
  
    height: 100,
    background: 'skyblue'
  ,
  
    height: 200,
    background: '#33CC00'
  ,
  
    height: 300,
    background: '#330033'
  ,
  
    height: 100,
    background: '#0066CC'
  ,
  
    height: 200,
    background: 'skyblue'
  ,
  
    height: 100,
    background: '#006666'
  ,
  
    height: 200,
    background: 'yellow'
  ,
  
    height: 300,
    background: 'yellow'
  ,
  
    height: 100,
    background: '#33CCFF'
  ,
  
    height: 400,
    background: 'yellow'
  ,
  
    height: 400,
    background: 'yellow'
  ,
  
    height: 200,
    background: '#33FF00'
  ,
  
    height: 300,
    background: 'yellow'
  ,
  
    height: 100,
    background: 'green'
  

]


</script>

子布局

wate-full.vue

<template>
  <div class="wraps">
    <div class="items" v-for="item in waterList"
         :style="
      height:item.height+'px',
      background:item.background,
      left:item.left+'px',
      top:item.top+'px',
    ">

    </div>
  </div>
</template>

<script lang="ts" setup>

import onMounted, reactive from 'vue'

const props = defineProps<
  list: any[]
>()

const waterList = reactive<any[]>([])
const init = () => 
  const width = 130;
  //获取可视区域的宽度
  const x = document.body.clientWidth
  //math函数库中的一个函数,math.floor(x)返回小于参数x的最大整数,即对浮点数向下取整。x[]的取值。 [1]  即取整数部分。
  const cloumn = Math.floor(x / width)


  for (let i = 0; i < props.list.length; i++) 
    if (i < cloumn) 
      //第一行进行排放
      props.list[i].left = i * width;
      props.list[i].top = 10;
      waterList.push(props.list[i])
      console.log(props.list[i].top)

    

  

onMounted(() => 

  window.onresize = () => init()
  init()
);

</script>

<style lang="less" scoped>
.wraps 
  position: relative;
  height: 100%;

  .items 
    position: absolute;
    width: 120px;
  

</style>

当前效果

 需要在最短的条目上面再次拼接进去条目 然后 重新计算条目高度

 

 

完整代码

<template>
  <div class="wraps">
    <div class="items" v-for="item in waterList"
         :style="
      height:item.height+'px',
      background:item.background,
      left:item.left+'px',
      top:item.top+'px',
    ">

    </div>
  </div>
</template>

<script lang="ts" setup>

import onMounted, reactive from 'vue'

const props = defineProps<
  list: any[]
>()

const waterList = reactive<any[]>([])
//重新计算高度的数组
const waterHeight: number[] = []

const init = () => 
  const width = 130;
  //获取可视区域的宽度
  const x = document.body.clientWidth
  //math函数库中的一个函数,math.floor(x)返回小于参数x的最大整数,即对浮点数向下取整。x[]的取值。 [1]  即取整数部分。
  const cloumn = Math.floor(x / width)


  for (let i = 0; i < props.list.length; i++) 
    if (i < cloumn) 
      //第一行进行排放
      props.list[i].left = i * width;
      props.list[i].top = 0;
      waterList.push(props.list[i])
      waterHeight.push(props.list[i].height)

     else 
      //其他行的排放
//获取最小高度的索引
      const minIndex = waterHeight.indexOf(Math.min(...waterHeight))
      console.log(minIndex)

      //重新摆放
      props.list[i].left = minIndex * width;
      props.list[i].top = waterHeight[minIndex] + 20;
      //重新更新数组
      waterList.push(props.list[i])
      waterHeight[minIndex] += props.list[i].height + 20

    

  

onMounted(() => 

  window.onresize = () => init()
  init()
);

</script>

<style lang="less" scoped>
.wraps 
  position: relative;
  height: 100%;

  .items 
    position: absolute;
    width: 120px;
  

</style>

完整效果