Difficult css / javascript task

Question

I have a project that has several divs with different width / height, and I need them to float essentially in the upper left corner. Simple css float: left will not work, because it will not use vertical space when it goes down to a new line.

I assume that I will need to use jQuery to dynamically position each div, but I was hoping someone could lead me in the right direction.

This is what the standard float left: standard float http://www.media1designs.com/poc/superfloat/diagram_float_left.gif

This is what I need: what I need http://www.media1designs.com/poc/superfloat/diagram.gif

Div sizes will change as the contents of the website are updated, so manually entering positions is not an option.

Answer 1

Have you tried the breadboard plugin ?

Answer 2

You should have an algorithm for determining the placement of the next element, taking into account the set of existing elements and the bounding box (width and height of the container). I would start with plain English and just write it down first with a pen and paper - it's easier than a code.

jQuery width height, , , css top/left. position "absolute", position "relative". . jQuery API.

, , calculateOffset(element, container) (, {left: x, top: y}) jQuery elements jQuery container, - , :

elements.each(function() {
  $(this).css(calculateOffset($(this), container));
});

, , calculateOffset. - , , ( top) , , ( left), .

Answer 3

, - , . , .

API ( , , ). , ( div, ) (, div). , , , , .