反转图像存档:使用CSS/Javascript从下到上堆叠图像？

Question

想知道是否有人有这方面的解决方案.
我想提供一个最旧的底部和最新的缩略图图像存档.我也希望流程本身能够逆转......就像这样:

页面应该右对齐,将来的图像添加到页面顶部.我正在使用PHP从MySQL DB中提取图像文件名来动态创建页面.这里的问题是我希望这种布局是流畅的,这意味着大多数用于计算图像和构建HTML的PHP​​技巧都会出现在窗外.

有没有办法用Javascript甚至只用CSS做到这一点？

Answer 1

请参阅: http ://jsfiddle.net/thirtydot/pft6p/

这用于根据需要对sfloat: right进行排序div,然后transform: scaleY(-1) 翻转整个容器,最后transform: scaleY(-1)再次翻转每个单独的图像.

它适用于IE9及更高版本和所有现代浏览器.

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>