CSS气泡云

问题描述

我正在尝试生成与此类似但没有动画的气泡云/气泡图： https://codepen.io/seogi1004/pen/WaWZOz

气泡应该居中而不重叠，以尽量减少它们之间的空间。

这是我目前的进展： https://codepen.io/FelixRe/pen/PobjNyM

#css
   .circle{
      border-radius: 50px; 
      border: 1px solid black;
      margin: 1px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .container{
      display: flex; 
      flex-wrap: wrap;
      width: 500px;
    }
    
    #app{
      display: flex;
      justify-content: center;
    }
    .active{
      background-color: red;
    }

#html
<div id="app">
<div class="container">
    <span
      v-for="i in 20"
      :key="i"
      :style="size()"
      class="circle"
    >
      <span class="body-1">{{ i }}</span>
    </span>
  </div>
</div>

#script
const app = Vue.createApp({
  methods: {
      random(min,max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
      },size() {
        const size = this.random(80,100)
        return 'width: ' + size + 'px; height: ' + size + 'px;'
      },},})

app.mount('#app')

您认为没有对绝对位置进行硬编码的精益方法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）