Question

我不知道如何正确指出我想要的英语，我请求你的帮助。我需要一种算法将多个矩形放在另一个矩形上，如this site上。

有人可以告诉我这个算法叫什么或提供任何其他有用的信息/链接？可能有某种数学方法有自己的名字来做这件事。

Answer 1

jQuery Masonry习惯于做你想要的。这就是你需要的算法或插件。

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

<强> 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编写的级联网格布局库。 This是github源代码的链接（请查看masonry.js）

Answer 3

问题称为rectangle packing。

完整的矩形包装问题需要一组矩形作为输入，并且应该找到占据最小区域的包装。这是非常难以做到的，也是ongoing research (PDF)的主题。

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

This site对其工作方式有很好的解释。

将矩形放在另一个矩形中

3 个答案: