如何用html css实现无序的泡泡布局？

Question

我需要像这样的气泡布局:

我完成了这个阶段的工作 - JsBin

由于我不熟悉CSS/Web设计,我只能想到使用table tr td.但我可以看到我需要气泡彼此靠近对齐.如果我去桌子结构,我认为它不会起作用.

请提出一些设计结构,或者我应该去寻找其他东西,SVG等.

谢谢!

Answer 1

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

演示： http: //po0.co.uk/circles/

用途： http: //packery.metafizzy.co/

代码：

<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>