Reverse image archive: folding images from bottom to top using CSS / Javascript?

Question

I wonder if anyone has a solution for this. I would like to introduce an archive of miniature images, the oldest in the lower and latest versions. I would also like the thread to be completely redesigned ... something like this:

The page should be aligned to the right and future images added to the top of the page. I am dynamically creating a page using PHP pulling image file names from a MySQL database. The trap is here, I would like this layout to be liquid, that is, most PHP tricks for counting images and building HTML accordingly exit the window.

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

Answer 1

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

It uses float: right to order the div as needed , then transform: scaleY(-1) flips the entire container , and finally transform: scaleY(-1) flips every single image back again.

It will work in IE9 and higher, 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

The CSS Flexible Box module was created for this type of thing. See a quick example: " http://jsfiddle.net/c6QLC/2/ (look at this in Firefox)

Now the bad news is: you cannot yet rely on it. Not only does the replica correspond with each other, the current implementation does not support box-lines (which I included in the example), which will allow the elements to be on several lines rather than overflowing.

The new specification is written in the dev version of some browsers, so this will happen. It is just a matter of time.

At the same time, perhaps something like Isotope may suit your needs.

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

Answer 3

This can be solved using the jquery masonry plugin. It is a bit like an isotope, but free for private and commercial users.