jQuery: Plugin like masonry to overcome dom-order and 3 item sizes

Question

this might be tough to explain. Is there a similar plugin like jQuery masonry that is able to detect spaces in a predefined grid and move and position elements that would fit into this spaces?

Since all other ways of explaining my question would be way to complicated I've drawn a simple image to show what I mean.

Notice: It's a fluid responsive webdesign.

So my dom-order is 1,2,3. However when collapsing my layout within a certain media-query I want to dynamically switch the dom order or position the elements differently. Just like you see in my sample.

I know there is stuff like jQuery Masonry or jQuery Isotope but both of those plugins don't fill all empty spaces of the grid. E.g. check out this isotope screenshot …

There is one element missing. Of course in most cases this is what you want to keep the order of the elements. In my case I don't care about the order, I just want to have all spaces and gaps filled. So exactly like you see my sketch above, the item-nr-3 should be moved upwards to fit the empty gap (since it would fit in). And if there would be another item the same size it would fit in the gap underneath item-nr-3.

Is that somehow possible? Is there some jQuery Plugin that does that? Or do you have any other idaes?

---

Some additional information: The items and boxes I'm talking about are all set to box-sizing:border-box so I do not have to worry about paddings or margins.

---

Update: Here is a live sample of the problem: http://jsfiddle.net/r79u2/1/

Answer 1

EDIT

Since the time of posting this I have added support of "Gutters" and callbacks

I wrote a plugin that does what you're looking for. Not EXACTLY but you could use it to point you in the right direction...

Plugin - https://github.com/DrewDahlman/Mason

Blog Post about Theory - http://www.drewdahlman.com/meusLabs/?p=218

The Idea is this - we know that we have a number of elements - Mason's job is to fill a defined space with these elements which are floated left - this results in "gaps" so we need to detect those gaps and somehow fill them with something. In order to do this we can either copy an already existing element or - we can have a bucket of "filler" elements that we can fill that space.

OP - if you're looking for a randomly sized grid with some control this will do the work. I have made this fiddle - http://jsfiddle.net/bdGVr/

You'll notice each time you run it or resize the window the grid re-draws. This will result in any gaps being filled in with a red block.

Playing with the options of the mason.js you can adjust the ratio which is the size relative to the container, as well as the possible size combos.

example - a ratio of 1.8 and a size of 1x3 means 1.8 x 1 = Height, and 1.8 x 3 = Width.