jQuery网格布局与可调整大小的面板

Question

我需要为我的html页面做一个简单的布局，我需要某种网格布局。

布局应该与图像中的布局相似：

能够使其中一个小部件全屏，因此它需要整个小部件＆＃39;区域如下图所示：

最后，每个小部件的内容都应该以动态调整大小以适应小部件本身（我使用完整的svg内容，所以它应该足以使用transform=scale(w,h)）

另一个需要的功能是调整大小的动画。

现在，由于我对html + javascript世界很陌生，我花了一整天的时间寻找一些很酷的 jQuery 插件来帮助我完成这项任务，而我＃＆＃ 39;最后有两个有用的插件：

• Freewall
• Gridster（我以前制作样本图片）

问题在于它们都缺少我需要的东西：它们不允许我在代码中移动块，但它们只能用于鼠标交互。

这意味着我无法展开widget2以占据整个区域，因为它会从当前位置开始展开，我无法移动它。

另一个问题是我无法移除我不需要显示的小部件。

使用 Freewall 我可以使用过滤，但是，例如，过滤小部件1 会使小部件2 的行消失并且页脚向上移动。

使用 Gridster ，有一个remove_widget方法并且它可以正常工作，但我需要将其html重新添加回来。

所以我构建了一个基于 jQuery 的自定义解决方案和某种手写计算来处理div的大小和类似的东西，它工作正常但是使用它真的很痛苦，因为每当我改变某些东西时，我都被迫使用Firebug来查看我需要的维度，例如试错法。

经常会发生两个相同大小的div需要不同的transform选项，并且很难使用该解决方案。

所以问题是：是否有任何插件/框架允许我构建一个类似于图像中的布局和我写的功能？

这可以概括为马赛克视图，其中一个框比其他框宽，并且能够将框制作成全屏。