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';//隨機顏色
		  }
		},
	  }

但是效果不是怎么好。主要是由得溢出了，有的又太小，而且uniapp的style不能使用rpx嗎？

我的一點思索

在獲取到數據之后，在掛在dom之前，就開始隨機的給對應數量的view元素，生成相應的css位置
那么，是使用浮動好，還是定位好呢？還是flex好呢？

當我看了前面的文章，繼續百度了一下網易星球,好像是可以！

網易星球鑽石隨機排列且不重疊代碼實現

https://blog.csdn.net/lhb215215/article/details/82906820