xdRectPacker

страница проекта | Исходные файлы

Класс для упаковки произвольных прямоугольников внутри прямоугольника.
Метод упаковывания крайне прост и от этого очень медлителен,
поэтому не рекомендую использовать большое число блоков

ru | eng

Начальный вариант без использования xdRectTags, как видите не айс

Загружаем и подключаем к странице xdRectTags.js

<script type="text/javascript" src="xdrectpacker.js"></script>

после это упаковываем элементы используя объект xdRectPacker, но до этого нужно заполнить массив blocks используя объект xdRect, который используется так

var blocks = [];
var tags = $('#mosaic').find('div');// находим все div в боксе
tags.each(function(){
	var div = this;
	if( div.style ){
		blocks[blocks.length]=new xdRect(0,0,parseInt(div.style.width),parseInt(div.style.height));
		blocks[blocks.length-1].elm = div;
	}
})

после этого, используем этот массив

var packer = new xdRectPacker( 300 );// где 300 это ширина mosaic 
packer.fit(blocks);
for(var i=0;i<packer.pack.length;i++){
	var block = packer.pack[i];
	block.elm.style.left = block.x;
	block.elm.style.top = block.y;
}

И для горизонтальной ориентации используем

var packer = new xdRectPacker( 300,true );// где 300 это высота mosaic

Класс используется в jQuery плагине xdCloudTags