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

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集传递给它更容易.