我的任务是在我们的 ASP.NET MVC 3 Web 应用程序中创建仪表板界面。首先，我将列出该项目所需的功能，然后我将尽力说明我打算创建什么以适应所有这些功能。
所需功能
仪表板将包含可在仪表板界面中拖动的小部件（或磁贴）。
拖动小部件时，周围的小部件将适当地重新排序。
小部件不可调整大小或可折叠，但它们将是可移动的。如果他们愿意，用户将通过菜单添加回小部件。
小部件必须适应可变宽度的浏览器窗口。垂直空间几乎是无限的。
小部件的高度和宽度将以 300 像素为增量，最大为 900 像素。换句话说，一个小部件可以是：300 x 300、600 x 300、300 x 900、900 x 900 等等。
我打算建造什么
这是我希望构建的几个插图。
尺寸并不完美，但这显示了一个带有 9 个小部件的仪表板。所有小部件都很舒适，并尽其所能优雅地填充屏幕的宽度。但是，小部件不必形成完美的正方形或矩形。如下图所示，吊坠是可以的。
请注意小部件的宽度和高度如何都以 300 像素为增量，如上述要求中所述。这应该有望使重新排序瓷砖的数学计算变得更容易。这让我想到了我的问题。
我的问题
我已经理解了这个概念，但我无法弄清楚从哪里开始。我不像我希望的那样精通数学，我需要一些帮助才能找到正确的方向。
如何从无特定顺序排序的一系列小部件（所有形状和大小）中获取到布局整齐、绝对定位的瓷砖网格，尽可能优雅地占用空间？
我如何从中得到：
对此：
或者至少是一个同样优雅的布局。瓷砖不必位于上图所示的确切位置。我只是想让他们玩完美的俄罗斯方块游戏，并且没有尴尬的间隙就位。
我需要考虑浏览器窗口的宽度，然后以某种方式循环遍历小部件数组并开始将它们添加到某种虚拟网格中。我希望它看起来尽可能优雅。
然后，在解决了我在初始页面加载后如何在页面上排序小部件之后，我需要允许用户移动他/她的小部件并让其他小部件尽可能整齐地重新排序以适应移动的小部件的新位置. 如果重新调整浏览器的大小，我还需要一种优雅的方式来重新排序小部件。
我不期待成熟的解决方案或实现。我只需要推动我认为的正确方向。也许，一个简单的头脑风暴描述循环遍历小部件的逻辑以及计算什么东西来达到最佳配置。