A grid of flowing content items with dynamically managed horizontal spacing

This project represents a technique for dynamically managing the left margin of a list of same-sized dom elements on a page so that as they wrap and flow into multiple lines, each line will will maintain even horizontal spacing.

I set out to create a user experience similar to the iTunes album art panel, and the gallery view in Apple's mobile-me web application: See example here.

Apple has a very complex implementation that does dynamic dataset loading during scroll events and absolutely positions each DOM element using inline styles.

So, for my implementation, I wanted to create an implementation that would accomplish the same thing with EXISTING markup and without any required DOM manipulations. This is done by addressing the single CSS rule that applies to the list items, and modifying it directly via javascript.

This technique can be applied to existing grid views without needing to re-engineer pagination rules or over-burdening the browser with DOM manipulations.

var grid = gridexpand.createGrid({ container : document.getElementById('expandinggrid'), cssRule : '.content ul li', itemWidth : 180, margin : 30 });

fig 1. A simple list of boxes, evenly spaced. View example

fig 1. Thumbnails pulled from Flickr. View example

fig 3. A paneled iTunes-like layout with evenly spaced grid items within the center panel. View example

View Adam Portilla's portfolio website