我试图创建一个两行三列网格布局：
这很简单。我想知道如何扩展任何一个给定的单元格，导致其他单元格围绕扩展单元格重新排列：
我不是在寻找纯粹的CSS解决方案。我有它的工作，但我根据我扩展的细胞对绝对位置进行硬编码，这感觉很脏：/ Thanks！ 解决方案
您可以像使用树形图一样使用装箱解决方案。您可以对矩形进行排序并创建一棵树并沿着2轴分割树。选择下一个项目并将其放在最佳空闲空间中。然后重新启动该过程。有一个jquery treemap插件。这里是一个例子，但包装光照贴图。这是一个伪代码： www.blackpawn/texts/lightmaps/ 。
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!
解决方案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:www.blackpawn/texts/lightmaps/.
更多推荐
动态调整网格单元格的大小
发布评论