CSS多个view随机分布，不重叠，如何实现呢？问题描述
下⾯的问题，描述的都是同⼀个问题
1.我想要随机⽣成5、6个view，不让这些view重叠，被卡在算法上了
2.随机的10多个⽓泡，可以点击
3.js实现固定区域内的不重叠随机圆
vue中返回随机数
<template>
<div>
{{  data }}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
data:''
};
},
created() {
},
methods: {
// ⽣成1-10的整数
// Math.floor(); 向下舍⼊
// console.log(Math.floor(3.8)); //向下舍⼊，⼩数点省略了结果：3
// Math.random()  random() ⽅法可返回介于 0（包含） ~ 1（不包含）之间的⼀个随机数。
// Math.floor((Math.random()*10)+1)；取得介于 1 到 10 之间的⼀个随机数：
// Math.floor((Math.random()*100)+1)；取得介于 1 到 100 之间的⼀个随机数：
getRandomInt(min, max) {
// 以下函数返回 min（包含）～ max（包含）之间的数字：
this.data = Math.floor(Math.random() * (max - min + 1)) + min
//  函数返回 min（包含）～ max（不包含）之间的数字
/
/  this.data = Math.floor(Math.random() * (max - min) ) + min;
},
}
};
</script>
vue随机⾊，可以衍⽣出其他随机CSS属性
把标题的颜⾊设置成随机⾊
<h4 v-rainbow>标题随机⾊</h4>
在script写局部⾃定义指令（如果想要写全局的需要在main.js⾥⾯书写）
局部
directives:{
'rainbow':{
bind(el,binding,vnode){
lor = '#' + Math.random().toString(16).slice(2,8);//随机颜⾊
}
},
}
全局（main.js）
Vue.directive("rainbow",{
bind(el,bind,vnode){
lor = '#' + Math.random().toString(16).slice(2,8);//随机颜⾊
}
按照上⾯的思路，⾃⼰随机⽣产了浮动情况下的left，top和随机⼤⼩
directives:{
'left':{
bind(el,binding,vnode){
el.style.marginRight = il(Math.random()*4)*10+'px';//随机颜⾊
}
},
'top':{
bind(el,binding,vnode){css怎么创建
el.style.marginTop = il(Math.random()*4)*10+'px';//随机颜⾊
}
},
'size':{
bind(el,binding,vnode){
el.style.width = il(Math.random()*10)*10+'px';//随机颜⾊
}
},
}
但是效果不是怎么好。主要是由得溢出了，有的⼜太⼩，⽽且uniapp的style不能使⽤rpx吗？
我的⼀点思索
在获取到数据之后，在挂在dom之前，就开始随机的给对应数量的view元素，⽣成相应的css位置那么，是使⽤浮动好，还是定位好呢？还是flex好呢？
当我看了前⾯的⽂章，继续百度了⼀下⽹易星球，好像是可以！
⽹易星球钻⽯随机排列且不重叠代码实现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。