I want to display random numbers inside a div at random positions without overlapping.
I am able to display random number at random position but its going outside the box and overlapping each other.
Here is my code:
JS Fiddle
var width = $('.container').innerWidth();
var height = $('.container').innerHeight();
(function generate() { // vary size for fun
for (i = 0; i < 15; i++) {
var divsize = 12;
var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width': divsize + 'px',
'height': divsize + 'px'
});
// make position sensitive to size and document's width
var posx = (Math.random() * (width - divsize)).toFixed();
var posy = (Math.random() * (height - divsize)).toFixed();
$newdiv.css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'float': 'left'
}).appendTo('.container').html(Math.floor(Math.random() * 9));
}
})();
How can I do this?
Vikram Deshmukh :
You've got most of it figured out. You just need to think of the .container div as a grid to avoid any overlap or outlying items.\n\nJust check out this fiddle.\n\nHere's what the code looks like:\n\nvar tilesize = 18, tilecount = 15;\nvar gRows = Math.floor($(\".container\").innerWidth()/tilesize);\nvar gCols = Math.floor($('.container').innerHeight()/tilesize);\n\nvar vals = _.shuffle(_.range(tilecount));\nvar xpos = _.shuffle(_.range(gRows));\nvar ypos = _.shuffle(_.range(gCols));\n\n_.each(vals, function(d,i){\n var $newdiv = $('<div/>').addClass(\"tile\");\n $newdiv.css({\n 'position':'absolute',\n 'left':(xpos[i] * tilesize)+'px',\n 'top':(ypos[i] * tilesize)+'px'\n }).appendTo( '.container' ).html(d); \n});\n\n\nPS:I have used underscore in my fiddle to make things easier for me and because I personally hate writing for loops.",
2013-11-18T11:30:33
6502 :
If the number of divs you need to create is small enough (i.e. you're not risking that they won't fit) then a simple algorithm is:\n\n\npick a random position (x0, y0)-(x1, y1)\ncheck if any previously selected rect overlaps\nif none overlaps then add the rect, otherwise loop back and choose another random position\n\n\nin code\n\nvar selected = [];\n\nfor (var i=0; i<num_divs; i++) {\n while (true) {\n var x0 = Math.floor(Math.random() * (width - sz));\n var y0 = Math.floor(Math.random() * (height - sz));\n var x1 = x0 + sz;\n var y1 = y0 + sz;\n var i = 0;\n while (i < selected.length &&\n (x0 >= selected[i].x1 ||\n y0 >= selected[i].y1 ||\n x1 <= selected[i].x0 ||\n y1 <= selected[i].y0)) {\n i++;\n }\n if (i == selected.length) {\n // Spot is safe, add it to the selection\n selected.push({x0:x0, y0:y0, x1:x1, y1:y1});\n break;\n }\n // The choice collided with a previously added div\n // just remain in the loop so a new attempt is done\n }\n}\n\n\nIn case the elements are many and it's possible to place n-1 of them so that there's no position where to put n-th element then things are a lot more complex.\n\nFor the solution of the 1-dimensional version of this problem see this answer.",
2013-11-18T08:42:25