亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue實(shí)現(xiàn)瀑布流布局的示例代碼

 更新時(shí)間:2023年09月15日 16:35:38   作者:szx的開(kāi)發(fā)筆記  
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)簡(jiǎn)單的瀑布流布局,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

父組件

<template>
  <WaterfallFlow :list="list"/>
</template>
<script setup lang="ts">
import WaterfallFlow from "@/components/WaterfallFlow.vue";
import {reactive} from "vue";
type listType = {
  height:number,
  color:string
}
// 隨機(jī)生成100個(gè)高度和顏色的對(duì)象
let list = reactive<listType[]>([
  ...Array.from({length:100},()=>({
    height:Math.floor(Math.random()*250)+50,
    color:`rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`
  }))
 ])
</script>

子組件

<template>
  <div class="wraps">
    <div v-for="item in list" class="item" :style="{
      left: item.left + 'px',
      top: item.top + 'px',
      height: item.height + 'px',
      backgroundColor: item.color,
    }"></div>
  </div>
</template>
<script setup lang="ts">
import {defineProps, onMounted} from "vue"
const props = defineProps<{
  list: any[]
}>()
const initLayout = () => {
  // 上下左右間隙距離
  let margin = 10
  // 每個(gè)元素的寬度
  let elWidth = 120 + margin
  // 每行展示的列數(shù)
  let colNumber = Math.floor(document.querySelector(".app-content").clientWidth / elWidth)
  // 存放元素高度的list
  let heightList = []
  // 遍歷所有元素
  for (let i = 0; i < props.list.length; i++) {
    let el = props.list[i]
    // i小于colNumber表示第一行元素
    if(i < colNumber){
      el.top = 0
      el.left = elWidth * i
      heightList.push(el.height)
    }else{
      // 找出最小的高度
      let minHeight = Math.min(...heightList)
      // 找出最小高度的索引
      let minHeightIndex = heightList.indexOf(minHeight)
      // 設(shè)置元素的位置
      el.left = elWidth * minHeightIndex
      el.top = minHeight + margin
      // 更新高度集合
      heightList[minHeightIndex] = minHeight + el.height + margin
    }
  }
}
// 監(jiān)聽(tīng)app-content元素的寬度變化
window.onresize = () => {
  initLayout()
}
onMounted(() => {
  initLayout()
})
</script>
<style scoped lang="scss">
.wraps{
  height: 100%;
  position: relative;
  .item{
    position: absolute;
    width: 120px;
  }
}
</style>

效果展示

到此這篇關(guān)于vue實(shí)現(xiàn)瀑布流布局的示例代碼的文章就介紹到這了,更多相關(guān)vue瀑布流布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue全局組件和局部組件的寫(xiě)法介紹

    vue全局組件和局部組件的寫(xiě)法介紹

    這篇文章主要介紹了vue全局組件和局部組件的寫(xiě)法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例

    Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例

    這篇文章主要為大家介紹了Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue上傳解析excel文件并在列表中輸出內(nèi)容

    vue上傳解析excel文件并在列表中輸出內(nèi)容

    在vue的項(xiàng)目開(kāi)發(fā)中,我們會(huì)遇到加載excel或者csv等情形,這個(gè)示例展示了這個(gè)需求,上傳一個(gè)excel文件,通過(guò)解析,生成數(shù)組,然后再列表中將內(nèi)容展示出來(lái),這篇文章主要介紹了vue上傳解析excel文件,列表中輸出內(nèi)容,需要的朋友可以參考下,
    2023-09-09
  • 詳解Vue2?watch監(jiān)聽(tīng)props的值

    詳解Vue2?watch監(jiān)聽(tīng)props的值

    再次遇到監(jiān)聽(tīng)子組件收到父組件傳過(guò)來(lái)的值,如果這個(gè)值變化,頁(yè)面中的值發(fā)現(xiàn)是不會(huì)跟著同步變化的,本文給大家介紹Vue2?watch監(jiān)聽(tīng)props的值,感興趣的朋友一起看看吧
    2023-12-12
  • 詳解Vue如何使用xlsx庫(kù)導(dǎo)出Excel文件

    詳解Vue如何使用xlsx庫(kù)導(dǎo)出Excel文件

    第三方庫(kù)xlsx提供了強(qiáng)大的功能來(lái)處理Excel文件,它可以簡(jiǎn)化導(dǎo)出Excel文件這個(gè)過(guò)程,本文將為大家詳細(xì)介紹一下它的具體使用,需要的小伙伴可以了解下
    2025-01-01
  • vue3?setup語(yǔ)法糖中獲取slot插槽的dom對(duì)象代碼示例

    vue3?setup語(yǔ)法糖中獲取slot插槽的dom對(duì)象代碼示例

    slot元素是一個(gè)插槽出口,標(biāo)示了父元素提供的插槽內(nèi)容將在哪里被渲染,這篇文章主要給大家介紹了關(guān)于vue3?setup語(yǔ)法糖中獲取slot插槽的dom對(duì)象的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-04-04
  • el-table?樹(shù)形數(shù)據(jù)?tree-props?多層級(jí)使用避坑

    el-table?樹(shù)形數(shù)據(jù)?tree-props?多層級(jí)使用避坑

    本文主要介紹了el-table?樹(shù)形數(shù)據(jù)?tree-props?多層級(jí)使用避坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-08-08
  • Vue自定義驗(yàn)證之日期時(shí)間選擇器詳解

    Vue自定義驗(yàn)證之日期時(shí)間選擇器詳解

    這篇文章主要介紹了Vue自定義驗(yàn)證之日期時(shí)間選擇器詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-02-02
  • vue3?keep-alive實(shí)現(xiàn)tab頁(yè)面緩存功能

    vue3?keep-alive實(shí)現(xiàn)tab頁(yè)面緩存功能

    如何在我們切換tab標(biāo)簽的時(shí)候,緩存標(biāo)簽最后操作的內(nèi)容,簡(jiǎn)單來(lái)說(shuō)就是每個(gè)標(biāo)簽頁(yè)中設(shè)置的比如搜索條件及結(jié)果、分頁(yè)、新增、編輯等數(shù)據(jù)在切換回來(lái)的時(shí)候還能保持原樣,這篇文章介紹vue3?keep-alive實(shí)現(xiàn)tab頁(yè)面緩存功能,感興趣的朋友一起看看吧
    2023-04-04
  • 從源碼角度來(lái)回答keep-alive組件的緩存原理

    從源碼角度來(lái)回答keep-alive組件的緩存原理

    這篇文章主要介紹了從源碼角度來(lái)回答keep-alive組件的緩存原理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01

最新評(píng)論