View the Project on GitHub sillylogger/heaps

This is a jQuery plugin to layout a bunch of elements into a heap or any pattern can describe with a function.


Uses the defaults and looks like this:

You can specify a different scoring function to layout the images. The default is distance from center, but what if you pass a scoring option of:

$('ul#demo').heapify('li', { scoring:

then you'll get something like this:

$(parent).heapify(selector, options)


Some DOM element with a width & height.


A CSS selector of items to be absolutely positioned within the parent.


options.step = 10
The granularity of item positioning. 1px granularity is computationally intensive, thus the default step is 10px until the algorithm is improved significantly.
options.scoring = function(coordinate) { }
This function is used to score each coordinate within the parent. This each coordinate is a pair of [x,y]. The function is called within the scope of the heap and thus has access to this.center (a coordinate), this.width, and this.height.
options.sort = false
This flag will cause heapify to sort the selected elements by area – placing the larger element in the highest priority spots.