您如何在仪表板上订购瓷砖？

Question

我的任务是在ASP.NET MVC 3 Web应用程序中创建仪表板界面。首先，我将列出此项目所需的功能，然后我将尽力说明我打算创建的内容以适应所有这些功能。

必备功能

• 仪表板将包含可在仪表板界面中拖动的小部件（或磁贴）。

• 拖动窗口小部件时，周围的窗口小部件将自行重新排序。

• 小部件不可重复大小或可折叠，但它们可以移动。如果用户愿意，用户将通过菜单添加小部件。

• 小部件必须适应可变宽度的浏览器窗口。垂直空间几乎是无限的。

• 小部件的高度和宽度将以300像素为增量，最大为900像素。换句话说，小部件可以是：300 x 300,600 x 300,300 x 900,900 x 900等。

我打算制作什么

以下是我希望建立的几个插图。

尺寸并不完美，但这显示了一个带有9个小部件的仪表板。所有小部件都很舒适，并尽力优雅地填充屏幕的宽度。但是，小部件不必形成完美的正方形或矩形。如下图所示，Danglers没问题。

注意小部件的宽度和高度是如何以300像素为增量，如上面的要求中所述。这应该有助于更容易地重新排序瓷砖。这让我想到了我的问题。

我的问题

我理解了这个概念，但我无法弄清楚从哪里开始。我不像我希望的那样精通数学，我需要一些帮助才能指明正确的方向。

如何从一系列按特定顺序排序的小部件（各种形状和大小）中获取整齐排列的绝对定位的网格网格，以优雅的方式占用空间尽可能？

我如何从中得到：

对此：

或者至少是一个同样优雅的布局。瓷砖不必位于如上图所示的确切位置。我只是希望他们能够玩一个完美的俄罗斯方块游戏而且没有尴尬的差距。

---

我需要考虑浏览器窗口的宽度，然后以某种方式遍历小部件数组并开始将它们添加到某种虚拟网格中。我希望它看起来像我能做到的那样优雅。

然后，在解决了我在初始页面加载后如何在页面上订购窗口小部件之后，我需要允许用户移动他/她的窗口小部件并让其他窗口小部件尽可能整齐地重新排序以适应移动小部件的新位置。如果重新调整浏览器大小，我还需要一种优雅的方法来重新排序小部件。

我不期待全面的解决方案或实施。我认为我只需要朝着正确的方向推进推送。也许，一个简单的脑风暴描述循环通过小部件的逻辑以及计算出来的东西以达到最佳配置。

Answer 1

在研究了jQuery Masonry，jQuery同位素，甚至是自定义块填充算法之后，我偶然发现了另一个名为jQuery Gridster的jQuery插件，它正是我想要的。这个插件有一些怪癖，它不是很精致，但经过一些调整，我能够有效地使用它。

注意：其中一个怪癖是插件的API。当您尝试使用插件API中的remove选项从网格中动态删除项时，它会抛出一大堆错误。这是某种竞争条件，因为它偶尔会发生。可能错过了该错误，因为当您使用API​​一次只删除一个项目时，它可以99％的时间工作。如果您快速连续删除多个项目（通过循环并多次调用API，或者通过将删除函数传递给包含多个元素的包裹集合），那么您将收到一堆控制台错误。

我需要从网格中删除所有图块并重新加载一组新图块。使用jQuery删除调用Gridster的元素然后从头开始调用插件更新，并将新的tile集传递给它。

Answer 2

您可以尝试使用jQuery Masonry之类的内容。看起来它至少可以解决你想要解决的一些问题。此外，要获得一些灵感和一些要查看的代码，请查看StackExchange如何列出其质量检查网站：http://stackexchange.com/sites?view=grid