动态灵活的网格布局

Question

我希望仪表板针对具有以下要求的灵活网格进行布局:

• 总宽度是可变的,并且必须始终适合屏幕,即使在调整大小时也是如此
• 细胞可以合并
• 所有列应具有相同的大小(例如,有3列)
• 与行相同
• 总高度应选择适合屏幕高度
• 那些网格是用户生成的,因此它们不能像在线生成器那样进行CSS硬编码.

这是我制作的一些照片:

用户定义网格的示例

合并单元格的相同示例

相同的例子缩放

我正在寻找一个插件/代码来实现这一点,因为我几乎可以肯定它不能在CSS中完成(据我所知,在大多数浏览器中还没有实现网格布局).我得到的最接近的是生成一张桌子,但是调整细胞的大小最终变成了一个完整的混乱(为什么这张桌子不整洁？).

Answer 1

您可以使用http://masonry.desandro.com/或http://www.wookmark.com/jquery-plugin这样的插件来接近它.

对于响应位,我建议阅读http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout.它讨论了砌体插件,但概念可以普遍应用.