A jquery plugin that slowly and lazily packs the contents of an element. Unlike most packing libraries that try to do all the math and sorting up front, stalactite takes a lazy approach and sorts each child element sequentially. This can add a sense of curation as it makes your viewer aware of the browser's decisions.

Download the minified version (4kb)

It sorts all types of content and is especially diligent about images, videos, and iframes making sure to load all media before assessing proper widths and heights.

It does this by setting all children of an element to display: inline-block; As a result this plugin requires a modern browser and plays well with Ben Barnett's Animate Enhanced. Scroll to the bottom to see usage.


duration: 350,                        // Duration of animation.
easing: 'swing',                      // Easing method.
cssPrefix: '.stalactite',             // The css naming convention.
cssPrep: true,                        // Should stalactite structurally modify css of children?
fluid: true,                          // Should stalactite recalculate on window resize?
loader: '<img />',                    // The contents of the loader. Defaults to a dataURL animated gif.
styles: {}                            // A style object to place on the child elements
complete: function(v) { return v; }  // Callback function

// or $("#container").stalactite(); — these are all optional params.
Examples (click to see example):

Fluid Example

Custom CSS

By jonobr1 — only for jQuery. Images from Gimmebar.