Размещение прямоугольников в другом прямоугольнике

Question

Я не знаю, как правильно указать, что я хочу на английском, прошу вас о помощи. Мне нужен алгоритм для размещения ряда прямоугольников в другом прямоугольнике, например, на this site.

Может ли кто-нибудь сказать мне, что этот алгоритм называется или предоставить любую другую полезную информацию/ссылки? Для этого есть, вероятно, какой-то математический метод с собственным именем.

Answer 1

Проблема называется rectangle packing.

Общая проблема с упаковкой прямоугольника принимает набор прямоугольников в качестве входных данных и должна найти упаковку, которая занимает наименьшую площадь. Это безумно сложно сделать и тема ongoing research (PDF).

К счастью, все становится намного легче, если вы уже довольны «хорошим» решением и не нуждаетесь в абсолютном минимуме. В частности, очень эффективное приближение - так называемая нарезная упаковка. Идея в основном заключается в создании двухмерного kd-Tree для упаковки.

This site имеет отличное объяснение того, как это работает.

Answer 2

Большинство таких реализаций используют динамическое позиционирование с использованием javascript. Вы можете проверить jquery masonry. Его каскадная библиотека макета сетки написана в javascript. This является ссылкой на источник github (check out masonry.js)

Answer 3

jQuery Масонство используется, чтобы делать то, что вы ищете. Это алгоритм или плагин, который вам нужен.

Вот несколько ссылок, чтобы вы начали:

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

});