动态调整网格单元格的大小 [英] Dynamically resizing grid cells

问题描述

我试图创建一个两行三列网格布局：

这很简单。我想知道如何扩展任何一个给定的单元格，导致其他单元格围绕扩展单元格重新排列：

我不是在寻找纯粹的CSS解决方案。我有它的工作，但我根据我扩展的细胞对绝对位置进行硬编码，这感觉很脏：/ Thanks！

解决方案

您可以像使用树形图一样使用装箱解决方案。您可以对矩形进行排序并创建一棵树并沿着2轴分割树。选择下一个项目并将其放在最佳空闲空间中。然后重新启动该过程。有一个jquery treemap插件。这里是一个例子，但包装光照贴图。这是一个伪代码： http://www.blackpawn.com/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:http://www.blackpawn.com/texts/lightmaps/.

这篇关于动态调整网格单元格的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！