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

Posted 2023-02-22

【中文标题】您将如何在仪表板上订购瓷砖？

【英文标题】：How would you order tiles on a dashboard?

【发布时间】：2012-08-08 04:31:48

【问题描述】：

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

所需功能

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

拖动小部件时，周围的小部件会适当地重新排序。

小部件不可调整大小或折叠，但它们可以移动。用户可以根据需要通过菜单添加小部件。

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

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

我打算构建什么

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

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

请注意小部件的宽度和高度均以 300 像素为增量，如上述要求中所述。这应该有望使重新排序瓷砖的数学计算变得更容易。这让我想到了我的问题。

我的问题

我理解了这个概念，但我不知道从哪里开始。我没有像我希望的那样精通数学，我需要一些帮助才能找到正确的方向。

我如何从一组没有特定顺序的小部件（各种形状和大小）中获取到一个布局整齐的绝对定位瓷砖网格，该网格占用空间同样优雅尽可能？

我如何从中得到：

到这里：

或者至少是类似优雅的布局。瓷砖不必位于上图所示的确切位置。我只是希望他们玩完美的俄罗斯方块游戏，并且不会出现尴尬的间隙。

---

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

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

我并不期待完整的解决方案或实施。我只需要推动 朝着我认为的正确方向前进。也许，一个简单的头脑风暴描述循环遍历小部件的逻辑以及计算什么东西以达到最佳配置。

【问题讨论】：

你想要一个块填充算法。查看codeproject.com/Articles/210979/…

您正在寻找一些流体布局插件，Checkout isoTope 插件，它做得不错

这个插件太棒了！它（几乎）完成了我想要的一切！可悲的是，this post 让我暂停 :(。它不适用于拖放。这绝对是我的项目的一个大要求。

我将不得不仔细研究一下。虽然the isoTope 插件看起来很漂亮，但我有一种感觉，我想要完全控制它。一个实际的算法会给我我认为的控制权。感谢您的回答！我会在继续时更新结果:)

你为什么不翻转俄罗斯方块中的橙色条？！为什么？！！ :)

【参考方案1】：

您可以尝试jQuery Masonry 之类的方法。看起来它至少可以解决您想要解决的一些问题。此外，要获得一些灵感和一些代码，请查看 StackExchange 如何列出他们的 QA 站点：https://stackexchange.com/sites?view=grid

【参考方案2】：

在研究了 jQuery Masonry、jQuery isotope 甚至自定义块填充算法之后，我偶然发现了另一个名为 jQuery Gridster 的 jQuery 插件，它完全符合我的要求。该插件有一些怪癖，而且不是很完善，但通过一些调整，我能够有效地使用它。

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

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