algorithm - 将矩形放置在另一个矩形中

Question

我不知道如何正确地用英语指定我想要的东西，我请求你的帮助。我需要一种算法来将一些矩形放入另一个矩形中，就像在这个网站上一样。

有人可以告诉我这个算法叫什么或提供任何其他有用的信息/链接吗？可能有某种具有自己名称的数学方法来执行此操作。

Answer 1

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

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

示例 1

小提琴示例

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
});

});

Answer 2

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

Answer 3

该问题称为矩形包装。

全矩形打包问题将一组矩形作为输入，并且应该找到占据最小面积的打包。这是非常难以做到的，也是一个正在进行的研究（PDF）的主题。

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

这个网站对它的工作原理有很好的解释。