如何用html css实现杂乱的气泡布局？

我需要有一个像这样的气泡布局：

我已经完成了这个阶段的工作 -JsBin http://jsbin.com/huyasi/6

由于我对CSS/Web设计不太熟练，所以我只能想到使用table tr td。 但我可以看到我需要将气泡彼此靠近对齐。如果我选择表结构，我认为它不会起作用。

请建议一些设计结构，否则我应该选择其他东西，SVG 等。

Thanks!

我希望这对你有帮助:)我对此很感兴趣。 （另请查看此内容以获取一些精彩的阅读/观看内容http://paulbourke.net/texture_colour/randomtile/ http://paulbourke.net/texture_colour/randomtile/)

Demo: http://po0.co.uk/circles/ http://po0.co.uk/circles/

Uses: http://packery.metafizzy.co/ http://packery.metafizzy.co/

Code:

<style>
    .circle
    {
    border-radius:50%;
    text-align:center;
    background:#efdeee;
    display:inline-block;
    margin:-5px;
    }
</style>
<div id="container">
    <?php
    $xx = 1;
    while ($xx <= 200) {
        $thisx = rand(10,99);
        echo '<div class="item circle" style="width:'.$thisx.'px;height:'.$thisx.'px;">&nbsp;</div>';
        $xx++;
    }
    ?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.1/packery.pkgd.min.js"></script>
<script>
    var container = document.querySelector('#container');
    var pckry = new Packery( container, {
      // options
      itemSelector: '.item',
      gutter: 10
    });
</script>