xdRectPacker

Page project | Source

bin-pack rectangles in rectangle An algorithm implementation in JavaScript for rectangle
packing. Packing method is extremely simple and this is very slow, so do not recommend
using a large number of blocks

ru | eng

Start Demo without xdRectTags

load and Include in page xdRectTags.js

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

after pack rectangles use xdRectPacker object, but before must complete an array of blocks use object xdRect, which has the form

var blocks = [];
var tags = $('#mosaic').find('div');// find all divs in box
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;
	}
})

after this, use it array

var packer = new xdRectPacker( 300 );// where 300 it width mosaic box
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;
}

And for horizontal orient use

var packer = new xdRectPacker( 300,true );// where 300 it height mosaic box

Class used in Plugin jQuery xdCloudTags