Good-enough dynamic object packing

Question

Using javascript, I aim to pack a set of set-size objects into a container of a given horizontal width, while maintaining an approximate initial order. White space isn't a particular issue, but the aim is for it to be minimised.

Manually, I can accomplish this tetris-style for a small number of objects.

| +---+ +-----+ |
| | 1 | |  3  | |
| +---+ +-----+ |
| +------+      |
| |   2  |      |
| +------+      |
| +--+   +----+ |
| |4 |   |  5 | |
| +--+   +----+ |

My javascript is reasonable, but I'd love to have some sample code or algorithms to base my implementation on. I realise this is probably out there, I'm just not sure what exactly to look for.

— Harold

Answer 1

What you need is Masonry. This lib will make the unusable space as little as possible. If you have problems with it look here.