javascript - CSS 气泡云

Question

我正在尝试生成类似于此的气泡云/气泡图，但没有动画： 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')

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

标签： javascriptcssvue.jsbubble-chart