How to achieve disorganised bubble layout with html css? - html

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;"> </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>

Answer 2

You can also try with the HTML5 canvas feature. Here you can learn more about CANVAS.
Please visit the FiddleDemo.
HTML
<canvas width="400" height="400" id="circles"></canvas>
Javascript
var circle = $('#circles').get(0).getContext('2d');
var circles = [
{ x: 50, y: 50, r: 25, c: "#78BA00" },
{ x: 80, y: 100, r: 35, c: "#F4B300" },
{ x: 150, y: 170, r: 15, c: "#78BA00" },
{ x: 50, y: 220, r: 20, c: "#F4B300" },
{ x: 60, y: 150, r: 10, c: "#78BA00" },
{ x: 70, y: 170, r: 15, c: "#F4B300" },
{ x: 110, y: 220, r: 16, c: "#78BA00" },
{ x: 130, y: 150, r: 2, c: "#F4B300" },
{ x: 60, y: 150, r: 5, c: "#78BA00" },
{ x: 70, y: 170, r: 12, c: "#F4B300" },
{ x: 110, y: 30, r: 21, c: "#78BA00" },
{ x: 180, y: 60, r: 2, c: "#F4B300" },
{ x: 70, y: 90, r: 21, c: "#78BA00" },
{ x: 220, y: 110, r: 2, c: "#F4B300" }
];
function drawCircle(data) {
circle.beginPath();
circle.arc(data.x, data.y, data.r, 0, Math.PI * 2);
circle.fillStyle = data.c;
circle.fill();
}
$.each(circles, function() {
drawCircle(this);
});
Explanation of { x: 50, y: 50, r: 25, c: "#78BA00" },
x : x-axis postion in pixels
y : y-axis position in pixels
r : radius in pixels
c : mention the color in hex
With the help of above parameters you can Position, Size and Color the circles as per your needs.
Most importantly this solution will be independent of server-side scripting.