javascript алгоритм двумерной упаковки или компактная расстановка прямоугольников

Javascript алгоритм двумерной упаковки или компактная расстановка прямоугольников. Демо

Как использовать:

Подключаем файл

<script src="xdRectPacker.js" language="javascript"></script>

к примеру на странице есть блоки, которые необходимо упаковать 

<div id="mosaic" style="width: 200px; height: 200px; position: relative">
	<div style="width: 20px; height: 61px; position: absolute; background-color: rgb(0, 0, 92)" id="div1"/>
	<div style="width: 23px; height: 28px; position: absolute; background-color: rgb(150, 217, 0);" id="div2"/>
	<div style="width: 21px; height: 90px; position: absolute; background-color: rgb(81, 196, 94); id="div3"/>
	***
	<div style="width: 49px; height: 24px; position: absolute; background-color: rgb(0, 82, 99);  id="div20"/>
</div>

далее собираем все блоки в массив blocks

var mosaic = document.getElementById('mosaic');
var tags = mosaic.getElementsByTagName('div');
var blocks = [],
    packer = new xdRectPacker( 200,false ); // создаем пакер, true для горизонтальной ориентации
for(var i in tags){
	var div = tags[i];
	if( div.style )
		blocks.push(new xdRect(0,0,parseInt(div.style.width),parseInt(div.style.height)));
}

далее расставляем все блоки

packer.fit(blocks);
for(var i in packer.pack){
	var div = tags[i];
	var block = packer.pack[i];
	if(div.style){
		div.style.left = block.x;
		div.style.top = block.y;
		div.style.width = block.w;
		div.style.height = block.h;
	}
}

Внимание: может сильно тормозить при большом количестве блоков, оптимально для использования не больше 100 блоков

Подробнее об алгоритмах упаковки можно прочитать в статье javascript алгоритм двумерной упаковки или компактная расстановка прямоугольников

Загрузить