Reverse image archive : stacking images from bottom to top with CSS / Javascript?

Question

Wondering if anyone has a solution for this.
I would like to present an archive of thumbnail images oldest at the bottom and newest at the top. I would also like the flow itself to be reversed... something like this:

The page should be right aligned, with future images added to the top of the page. I am creating the page dynamically with PHP pulling image filenames from a MySQL DB. The catch here is I would love this layout to be fluid, meaning most PHP tricks for counting images and building the HTML accordingly go out the window.

Is there a way to do this with Javascript or even just CSS?

Answer 1

See: http://jsfiddle.net/thirtydot/pft6p/

This uses float: right to order the divs as required, then transform: scaleY(-1) flips the entire container, and lastly transform: scaleY(-1) again flips each individual image back.

It will work in IE9 and greater and all modern browsers.

CSS:

#container, #container > div {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}

#container {
    background: #ccc;
    overflow: hidden;
}
#container > div {
    float: right;
    width: 100px;
    height: 150px;
    border: 1px solid red;
    margin: 15px;
    font-size: 48px;
    line-height: 150px;
    text-align: center;
    background: #fff;
}

HTML:

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ..
</div>

Answer 2

CSS Flexible Box Module was made for this type of thing. See a quick example I whipped up: http://jsfiddle.net/c6QLC/2/ (look at this in Firefox)

Now the bad news: you can't really rely on it yet. Not only is the spec being rewritten, the current implementation doesn't support box-lines (which I did include in the example), which would allow the items to be in multiple rows as opposed to being overflow.

The new spec is being written into dev versions of some browsers, so it will happen. It's just a matter of time.

In the meantime, perhaps something like Isotope might fit your needs.

Should you want to check out the spec, you can find it here: http://www.w3.org/TR/css3-flexbox/