Javascript 带有网格布局的Jquery仪表板

我希望构建一个基于Jquery的仪表板。请看以下示例：

及

我认为，如果我们有一个流畅的布局，这个功能很容易实现。然而。我想要一个比上面提到的例子稍微复杂一点的仪表板

我要创建的仪表板将具有 可以将项目放置到其中的网格。项目可以放在页面上的任何位置，项目之间允许存在间距。 可以根据网格调整项目的大小，从而使项目移开

我不希望像谷歌主页仪表板那样的布局，在那里瓷砖向上移动，不允许网格中瓷砖之间存在间距

例如，我有一个10 x 10的网格（每单位50像素）

一个平铺可以是1 x 1，大小可以调整为1 x 2，然后可以是一个1 x 1的间隔，然后是另一个平铺

我正在寻找一个好的算法来实现这一点。我的最终目标是最终得到一个类似于android主屏幕的仪表板

然而，我的主要缺点是目前用于交换和组织网格的智能碰撞检测

---

一旦完成，我希望在github上分享我的仪表板。谢谢。

它不是一个jQuery插件，但除了调整大小之外，它做了您提到的所有事情

---

如果您发现了更完整的内容，请告诉我们。

您是否正在寻找一个jQuery插件来完成此操作。或者自己从头开始写一个。或者让这里的人为您的网站写一篇文章，然后发布到GitHub上？：）我正在寻找一个Jquery插件，如果可能的话（如果它满足我的要求），它可以帮助实现这一点。我可能最终会写我自己的，但我正在寻找一个好的算法或参考实现来实现这一点。你提供的两个链接是一个非常好的起点，你可以阅读代码理解它，然后根据你的需要定制它。听起来好像有几个用户体验问题需要首先回答。瓷砖将如何调整大小？通过拖动边缘？假设在你的10 x 10网格上，我有100个瓷砖（每个1x1）。如果将左上角的平铺调整为2x1，会发生什么情况？是否应该删除/删除/推送右侧的互动程序？我会试着首先考虑每一种用户体验的可能性，并确保您所描绘的内容是可用的。抱歉没有回答。。。从实现的角度来看，您可能正在研究munging jQuery UI的可排序和可调整大小，并使用一些自定义逻辑来处理调整大小的UX。看起来该项目可以为您提供一个很好的起点。瓷砖的大小不可调整，但它们可能有不同的大小。Gridster是一个好的开始。但事实上，它并没有以我期望的方式完成它。当然是投票。网格布局不允许项目在两个小部件之间为垂直空列行，也不允许调整大小。小信息更新：Gridster是一个jQuery插件，支持平铺大小调整等（至少现在，正如我在迄今为止尝试的演示中所看到的）。即使信息有点过时，它也帮助我指向这个漂亮的小插件。谢谢@rowanu；）