Question

I’ve got a bit of a tricky question I couldn’t find the answer to. Basically, This is what I have:

In the center is a search box (fixed to the center of the page), and around it are dynamically loaded search results of differing sizes (although, if need be these can be restricted). Thing is, they need to “wrap” around the search box after the results have been loaded. My normal go-to is floating, but this isn’t really going to work, as the box isn’t aligned to a particular direction.

I’ve looked at jQuery Masonry for a solution, but it isn’t going to work for me (doesn’t detect fixed elements, doesn’t work from a point).

Any pointers in terms of solutions or Google-Fu would be much appreciated.

Answer 1

This is similar to packing textures of different sizes on a square. Have a look at this algorithm: http://www.blackpawn.com/texts/lightmaps/default.html

Since you have a central fixed box, maybe you can divide your available space in 4 rectangles and then pack the boxes into them.