将矩形放在另一个矩形中[重复]答案

【问题标题】：Placing rectangles in another rectangle [duplicate]将矩形放在另一个矩形中[重复]
【发布时间】：2013-06-16 16:51:57
【问题描述】：

我不知道如何正确地用英语指定我想要的东西，我请求你的帮助。我需要一种算法将多个矩形放入另一个矩形中，例如this site。

谁能告诉我这个算法叫什么或提供任何其他有用的信息/链接？可能有某种具有自己名称的数学方法可以做到这一点。

【问题讨论】：

该页面上的图像只是缩放到相同的宽度并相互叠加。
试试这个问题/答案：stackoverflow.com/questions/3476778/…
这可能是真的，但我知道当您不将图像缩放为具有相等宽度时，有一种算法可以正确执行此操作。我只是不知道它是怎么称呼的，但我以前在某个地方见过它。
Marius：然后您应该更新您的问题以询问如何在不等宽的情况下进行操作。所问的问题是要求“jQuery Masonry”作为答案，但您的预期问题是要求矩形包装背后的数学作为答案。实际上，您可能希望多考虑一下您的约束（也许您有能力调整图像大小，并且需要决定如果您的图像不能完美匹配（几乎可以肯定是这种情况）该怎么办）......在两侧留空房间或调整大小等）。

标签： algorithm sorting

【解决方案1】：

jQuery Masonry 用于做你正在寻找的东西。这就是你需要的算法或插件。

以下是一些帮助您入门的链接：

Example 1

Fiddle Example

HTML

<div id="container">
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>

CSS

body {
font-family: sans-serif;
}

#container {
border: 1px solid;
padding: 5px;
}

.item {
width: 60px;
height: 60px;
float: left;
margin: 5px;
background: #CCC;
}

.item.w2 {
width: 130px;
}

.item.h2 {
height: 130px;
}

JavaScript

$( function() {

$('#container').masonry({
    itemSelector: '.item',
    columnWidth: 70
});

});

【讨论】：

感谢您抽出宝贵时间。我会研究图书馆的代码，看看它是否是我要找的。span>

【解决方案2】：

这个问题叫rectangle packing。

全矩形包装问题将一组矩形作为输入，并应该找到一个占据最小面积的包装。这很难做到，而且是ongoing research (PDF)的话题。

幸运的是，如果您已经对“好的”解决方案感到满意并且不需要绝对最低限度，事情会变得容易得多。特别是，一种非常有效的近似被称为切片包装。这个想法基本上是为包装创建一个二维kd-Tree。

This site 很好地解释了它的工作原理。

【讨论】：

啊……包装……这就是我要找的词。谢谢。

【解决方案3】：

大多数此类实现都使用 javascript 进行动态定位。您可能想查看jquery masonry。它是一个用 javascript 编写的级联网格布局库。 This 是 github 源的链接（查看 masonry.js）

【讨论】：

谢谢，我去看看这个库。