vue3:瀑布流
父组件
javascript
<template>
<waterFallVue :list="list"></waterFallVue>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue';
import waterFallVue from './components/water-fall.vue';
let list=[
{
height:300,
background:"red"
},
{
height:400,
background:"pink"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
},
{
height:300,
background:"red"
},
{
height:400,
background:"pink"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
},{
height:300,
background:"red"
},
{
height:400,
background:"pink"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
},
{
height:300,
background:"red"
},
{
height:400,
background:"pink"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
},
{
height:500,
background:"blue"
},
{
height:200,
background:"yellow"
},
{
height:100,
background:"orange"
},
{
height:150,
background:"black"
},
{
height:350,
background:"grey"
},
{
height:450,
background:"brown"
}
]
</script>
<style lang="scss">
// #app{
// @include bfc;
// }
</style>子组件 water-fall.vue
javascript
<template>
<div class="wrap">
<div :style="{height:item.height+'px',background:item.background,left:item.left+'px',top:item.top+'px'}" v-for="item in waterList" class="items"></div>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted} from 'vue'
const props=defineProps<{
list:any[]
}>()
const waterList=reactive<any[]>([]);
const heightList:number[]=[];
const init = () => {
const width=130;
const x=document.body.clientWidth;
const column=Math.floor(x / width);
console.log(column);
for(let i=0;i<props.list.length;i++){
if(i<column){
props.list[i].left=i*width;
props.list[i].top=20;
waterList.push(props.list[i]);
heightList.push(props.list[i].height);
}else{
let current=heightList[0];
let index=0;
heightList.forEach((h,i)=>{
if(current>h){
current=h;
index=i;
}
})
props.list[i].top= current + 20;
props.list[i].left= index * width;
heightList[index]=heightList[index] + props.list[i].height + 20;
waterList.push(props.list[i])
console.log(current);
}
}
// console.log(waterList);
}
onMounted(()=>{
init();
})
</script>
<style scoped lang="scss">
.wrap{
position: relative;
.items{
position: absolute;
width: 120px;
}
}
</style>原文：
关注原作者
