CSS多个view随机分布，不重叠，如何实现呢？

问题描述

下面的问题，描述的都是同一个问题
1.我想要随机生成5、6个view,不让这些view重叠,被卡在算法上了
2.随机的10多个气泡，可以点击
https://blog.csdn.net/weixin_34378922/article/details/93432361
3.js实现固定区域内的不重叠随机圆

vue中返回随机数

<template>
  <div>
    {{  data }}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        data:''
      };
    },
    created() {
      this.getRandomInt(1,10)
    },
    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){
        el.style.color = '#' + Math.random().toString(16).slice(2,8);//随机颜色
      }
    },
  }

全局（main.js）

Vue.directive("rainbow",{
    bind(el,bind,vnode){
      el.style.color = '#' + Math.random().toString(16).slice(2,8);//随机颜色
    }

按照上面的思路，自己随机生产了浮动情况下的left，top和随机大小

directives:{
	    'left':{
	        bind(el,binding,vnode){
	        el.style.marginRight = Math.ceil(Math.random()*4)*10+'px';//随机颜色
	      }
	    },
		'top':{
		    bind(el,binding,vnode){
		    el.style.marginTop = Math.ceil(Math.random()*4)*10+'px';//随机颜色
		  }
		},
		'size':{
		    bind(el,binding,vnode){
		    el.style.width = Math.ceil(Math.random()*10)*10+'px';//随机颜色
		  }
		},
	  }