javascript - 动态调整网格单元格

标签 javascript html css grid responsive-design

我正在尝试创建一个两行三列的网格布局:

grid

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

enter image description here

我不一定要寻找纯 CSS 解决方案。我让它工作,但我正在根据我正在扩展的单元格对绝对位置进行硬编码,这感觉很脏:/谢谢!

最佳答案

您可以使用像 TreeMap 这样的装箱解决方案。您可以对矩形进行排序并创建树并沿 2 轴拆分树。选择下一个元素并将其放在最佳的可用空间中。然后重新启动该过程。有一个 jquery treemap 插件。这是一个示例,但打包了光照贴图。这是一个伪代码:http://www.blackpawn.com/texts/lightmaps/ .

关于javascript - 动态调整网格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20406893/

相关文章:

javascript - 单击链接时隐藏第二层下拉菜单 - jQuery

jquery - li 元素内的超链接

html - 使用 CSS 的样式问题

javascript - 使用js以编程方式添加输入文件标签

javascript - 避免手动柯里化(Currying)函数将类型变量推断为未知

html - 这是使用 iframe 的好习惯吗

javascript - 如何使用 Canvas 创建半水滴和半砖图案

html - 如何使用类使用 CSS 将无表格 HTML 表单呈现为两列?

javascript - 如何在 jquery 中激活当前选项

php - 如何在 JavaScript 中使用 PHP 变量?