vue實(shí)現(xiàn)瀑布流布局的示例代碼
父組件
<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實(shí)現(xiàn)帶參數(shù)的自定義指令示例
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01詳解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文件
第三方庫(kù)xlsx提供了強(qiáng)大的功能來(lái)處理Excel文件,它可以簡(jiǎn)化導(dǎo)出Excel文件這個(gè)過(guò)程,本文將為大家詳細(xì)介紹一下它的具體使用,需要的小伙伴可以了解下2025-01-01vue3?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-04el-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-08vue3?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組件的緩存原理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01