带网格布局的Jquery仪表板

我期待构建一个基于JQuery的仪表板。看着下面的例子：带网格布局的Jquery仪表板

和

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

我正在创建的仪表板将有表示可以放置项目的网格。这些项目可以放置在页面的任何位置，并且可以在项目之间存在间距。这些物品可以根据网格大小调整，导致物品移动。

我做不是想要一个像谷歌主页仪表板一样的布局，其中瓷砖向上移动并且不允许栅格之间的间距。

因此，例如我想有一个10×10的网格（每单位50个像素）

瓷砖可以是1×1和调整为1×2，然后可以有1×1间隔件，然后另一个瓷砖。

我正在寻找一个很好的算法来实现这一点。我的最终目标是结束与您在Android主屏幕上看到的类似的仪表板。

但是，我的主要缺点是当前智能碰撞检测交换和组织网格。

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

2012-12-05 Elixir

您是否在寻找一个可用于执行此操作的jQuery插件。或者从头开始自己写。 *或者*让别人在这里写一个给你，然后发布到GitHub上？ :) –

我正在寻找一个Jquery插件，如果可能的话（如果它满足我的要求）可以帮助这个插件。我最终可能最终会写我自己的，但我正在寻找一个好的算法或参考实现来解决这个问题。 – Elixir

您提供的两个链接是一个非常好的起点，您可以阅读代码了解它，然后根据您的需要对其进行自定义。 –

这不是一个jQuery插件，但Gridster做你提到的一切，除了调整大小。

如果您发现更完整的内容，请让我们知道。

2013-01-11 02:44:58 rowanu

Gridster是一个好开始。但实际上它并没有以我期望的方式实现它。肯定upvoting。网格布局不允许的项目是两个部件之间的垂直空列行以及不允许进行调整。 – Elixir

看看http://ksylvest.github.io/jquery-gridly/ – Steve

一点信息更新：Gridster是一个jQuery插件瓷砖大小调整支持等（至少现在我可以在我试过的演示看至今）。即使信息是有点过时。它帮助我指着这个可爱的小插件。谢谢@rowanu;） –

回答