heaps.js by sillylogger

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

$('ul#ball-of-images').heapify('li')

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:

function(coordinate) {
    return -1 * Math.abs(coordinate[1] - this.center[1]);
}

});

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.