Divs de ancho máximo aleatorios, no superpuestos, de tamaño uniforme en las filas

I've got a complicated problem. I'm trying to randomly generate divs of different heights with the conditions that

  1. no divs overlap,
  2. divs along the same "x-line" have the same width, and
  3. divs take up maximum available width without violating condition 2.

I'm storing the values for each div as I create them. Preventing overlaps is easy, I basically loop over all of the divs and check:

if (obj1.y < obj2.x && obj2.x < obj1.y) 

However, things get complicated when I have multiple colliding divs. Say I have two non-colliding divs (full width):

Here is a link to an illustration (can't include images without rep :( )


Where Div1.width = Div2.width = Div3.width.

My first attempts at creating the algorithm fail. Basically, when I add a div I detect how many collisions there are. In the case of Div3 it collides with 2 other divs, but since Div1 and Div2 don't collide, I only need to multiple the width by 1/2, not 1/3. I can fix the algorithm by checking whether Div1 and Div2 collide, but I have no idea how to generalize this to n Divs.

Cualquier ayuda sería muy apreciada :)

EDIT: Added image to attempt to illustrate a basic scenario :)

preguntado el 05 de mayo de 13 a las 21:05

You've got some weird formatting there. Perhaps it would be better to use an image instead of indenting your text like that. -

Your Dropbbox link isn't working. Put the image on imgur or somewhere permanent. -

1 Respuestas

I am using 'find empty boxes' algorithm, something like here: http://www.drdobbs.com/database/the-maximal-rectangle-problem/184410529

Step1: Divide screen into grids, e.g.

var screenWidth = 1360,
    screenHeight = 900;
var unitHeight = 10,
    unitWidth = 10;
var X_grids_count = screenWidth/unitWidth;
var Y_grids_count = screenHeight/unitHeight;

Step2: Define a 2-dimensional array, and make the value of all grids as 0, e.g.

GridArray = [];
    GridArray[i] = [];
        GridArray[i][j] = 0;     

Step3: When you put an object on screen, make the value of the occupied grids into 1, e.g.

//Get the width and length of the object
//Get the position of the object
//Calculate how many grids in X-coordinate
//Calculate how many grids in Y-coordinate
//Calculate the start grids
//Use a for loop to make the value of the occupied grids into 1

Step4: When you put a new object on screen, scan all available grids(grid's value is 0)

//Scan from the first grid, check if all grids within the square that the new object occupies are available
//Get all available squares in the screen. You can make all startpoints(grids) as candidates
//Calculate the best one through all candidates based on your constraints, e.g. the shortest distance
//Convert the index of grids to actual pixel and put the object on that position
//Set the value of the occupied grids into 1


Respondido 09 Jul 13, 15:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.