<template>
<div class="home">
<!--
scroll 事件在元素滚动条在滚动时触发。
--->
<div class="a1" >
<div class="a2"
v-for="(item,index) in list" :key="index"
:style="{
'height':item.ilm +'px',
'left':item.x+'px',
'top':item.y+'px',
'background-color': 'red' ,
'margin':2+'px'
}"
>
{{item.ilm}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
list:[]
}
},
created(){
//1.生成随机数
let kop=[]
for(var i=0;i<1000;i++){
kop.push(Math.floor(Math.random() *10) * 10 + 100)
}
//2.定义初始的位置 外边距间隔为20px
let ko=20
let lo=20
//3.计算每个方块的位置并添加到list里面
for(var ilm of kop){//ilm是获取高度
let x=20//这里宽高的长度xy
let y=0
if(ko<=lo){//这是第一列的盒子
//这个是第一列盒子的排列 此时x是left y是 top ilm是高度
y=ko
ko += ilm+20
}else{//这是第二列的盒子
//这个是第二列盒子的排列 此时x是left y是 top ilm是高度
x=290
y=lo
lo += ilm+20
}
this.list.push({x,y,ilm})
//所以说可以抽象的看为一排盒子,当上面定义的初始位置 第一次做判断时,那么就做的是第一个盒子,此时
//x left的边距不变,然后y的top要变化 还有高度也变化
//而当走第二个时候,left 的x变远了,然后这时候变化也是边距
//然后再循环由于是随机数,所有可能是大于或等于,如果是大于 那么走下面的,那么第三次必然是小于,所以三个值又不同的用处
}
console.log(this.list)
},
methods:{
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.a1{
width: 560px;
height: 1000px;
overflow: auto;
position: relative;
background-color: rgb(222,222,222)
}
.a2{
width: 250px;
position: absolute;
border-radius: 10px;
}
</style>