帶網格佈局的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;） –

回答