Geek Answers Handbook

How to achieve disorganized layout of bubbles using html css?

I need to have a bubble layout like this:

enter image description here

I finished work before this stage - JsBin

Since I'm not a CSS / Web design professional, I can only think about using the tr td table. But I see that I need the bubbles to be aligned close to each other. If I go to the table structure, I don’t think it will work.

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

Thanks!

+5
source share
2 answers

Hope this helps you :) I enjoy it. (Also check this out for a great read / view http://paulbourke.net/texture_colour/randomtile/ )

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

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

The 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>
+2
source

You can also try using the HTML5 canvas feature. Here you can learn more about CANVAS.

Please visit 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 {x: 50, y: 50, r: 25, c: "# 78BA00"},

  • x: x-axis position in pixels
  • y: y-axis position in pixels
  • r: radius in pixels
  • c: specify color in hexadecimal format

Using the above options, you can place the size and color of the circles according to your needs.

Most importantly, this solution is independent of server-side scripting.

0
source

More articles:


All Articles