Dynamically resizing grid cells

问题

I am attempting to create a two-row, three-column grid layout:

This is pretty simple. I am wondering how to expand any one of the given cells, causing the other cells to rearrange around the expanded cell:

I am not looking for a pure-CSS solution necessarily. I have it working, but I am hardcoding absolute positions based on what cell I am expanding, which feels dirty :/ Thanks!

回答1:

You can use a bin-packing solution like a treemap. You can sort the rectangles and create a tree and split the tree along the 2 axis. Pick the next item and put it in the best free space. Then restart the process. There is a jquery treemap plugin. Here is an example but packing lightmaps. It's a pseudo-code:http://www.blackpawn.com/texts/lightmaps/.

回答2:

If you're always going to have a 3x2 grid, I don't see the harm in hard-coding parts of it.

Here's a solution that uses CSS, and just shifts the tiles around a bit if they are either the middle or last tile in the row. http://jsfiddle.net/m2pWL/1/ You can just click the squares to make them bigger.

Note that the #wrapper needs to have a width of this formula