javascript - 2D装箱的变化？

Question

根据我对装箱的理解，您正在尝试将预先确定且通常大小不同的物体放入一个或多个容器或预先确定的固定大小的“箱子”中。我有一个问题，我有一个固定大小的容器和固定数量的必须适合它的元素。不同之处在于我的元素不是固定大小，但可以调整为特定大小的任意倍数数字。例如:

假设我有 3 个对象或元素，它们必须完全适合 280x420 的容器，并且对象的大小必须重新调整为 140 的倍数。

因此，它可以像这样适合:(或垂直翻转)

+----------+----------+
| 140x140  | 140x140  |
|          |          |
|          |          |
+----------+----------+
| 280x280             |
|                     |
|                     |
|                     |
|                     |
+---------------------+

或:(或水平翻转)

+----------+----------+
| 140x210  | 140x420  |
|          |          |
|          |          |
|          |          |
+----------+          |
| 140x210  |          |
|          |          |
|          |          |
|          |          |
+----------+----------+

最终，每个框的大小将根据统计数据动态确定。 (例如，如果一个项目的统计数据为 90%，而另外两个项目的统计数据为 2% 和 8%，那么显然 90% 会得到更大的框。)但是，我尽量不要过于复杂还没有，所以创建一个算法来填充容器是我现在的主要目标。

我一直在研究不同的算法，但还没有想出一个理想的方法来尝试这个。任何指针？例子？类似的现有数学或其他算法？

---

一个更复杂的示例是:6 个项目，560x420 的容器。元素 JSON:{ “0”:“432”，“1”:“389”，“2”:“403”，“3”:“190”，“4”:“215”，“5”:“832” "一种可能的渲染:

+----------+----------+---------------------+
| 140x280  | 140x140  | 280x140             |
| (0,1,    | (3 or 4) | (2)                 |
|    or 2) |          |                     |
|          |          |                     |
|          +----------+---------------------+
|          | 140x140  | 280x280             |
|          | (3 or 4) | (5)                 |
|          |          |                     |
|          |          |                     |
+----------+----------+                     |
| 280x210             |                     |
| (0,1, or 2)         |                     |
|                     |                     |
|                     |                     |
+---------------------+---------------------+

Answer 1

做了更多的挖掘，发现我正在寻找的东西被称为“砌体”。对此进行了一些探索，然后遇到了 Isotope，这是一个 jQuery 插件，它(希望)能做我想做的事情。这应该是一项快速学习。

http://isotope.metafizzy.co/