php – 反向图像存档:使用CSS / Javascript从下到上堆叠图像?

前端之家收集整理的这篇文章主要介绍了php – 反向图像存档:使用CSS / Javascript从下到上堆叠图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
想知道是否有人有解决方案.
我想提供一个最旧的底部和最新的缩略图图像存档.我也希望流程本身能够逆转……就像这样:

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

有没有办法用Javascript甚至只做CSS?

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

这使用float:right到order the divs as required,然后变换:scaleY(-1)flips the entire container,最后再变换:scaleY(-1)再次flips each individual image back.

它适用于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>
原文链接:https://www.f2er.com/php/134325.html

猜你在找的PHP相关文章