How to achieve disorganised bubble layout with html css?

Question

I need to have a bubble layout like this:

I have completed the work till this stage - JsBin

As I am not that skilled in CSS/Web design, I can only think of using table tr td. But I can see I will need the bubbles to be aligned close to each other. If I go for table structure, I dont think it will work.

Please suggest some design structure, or I should go for other things, SVG, etc.

Thanks!

Answer 1

I hope this helps you :) I have fun with this. (Also check out this for some great reading / viewing http://paulbourke.net/texture_colour/randomtile/)

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

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