Rectpack
a very fast implementation of a bin-packing algorithm. Good for spritesheets or atlastextures. Its data-based not DOM-based, so you can use it for DOM-objects as well as for canvas ...
Demo
Usage
Download the minified library and include it in your html.
It can als be installed via npm
npm install --save recterjs
Create a your, by calling the global Function RP :
var rectdata = ;
where objectsDatas is basicaly an array of objects which have tow fields mandatory:
singleObject = width: number height: number ownDataOrObjects: any
you will get back the generated bin-packed-data, where elements are basically your inputElemnts with attached x (left) and y (top) values :
atlasSize: height:number width:number elements: width: number height: number ownDataOrObjects: any x: number y: number width: number height: number ownDataOrObjects: any x: number y: number ...
example
var elements = ; forvar i = 0; i < 600; i++ var el = document; elstylewidth = 3 +Math*30+"px"; elstyleheight = 3 +Math*30+"px"; elstylebackgroundColor = "rgba("++")"; elstyleposition = "absolute"; someHTMLElement; elements; var els = ; console; elselements;
for a small Demo have a look here: DEMO