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

发布时间：2020-12-13 18:02:20 所属栏目：PHP教程来源：网络整理

导读：想知道是否有人有解决方案. 我想提供一个最旧的底部和最新的缩略图图像存档.我也希望流程本身能够逆转……就像这样：页面应该右对齐,将来的图像添加到页面顶部.我正在使用PHP从MySQL数据库中提取图像文件名来动态创建页面.这里的问题是我希望这种布局是流畅

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

页面应该右对齐,将来的图像添加到页面顶部.我正在使用PHP从MySQL数据库中提取图像文件名来动态创建页面.这里的问题是我希望这种布局是流畅的,这意味着大多数用于计算图像和构建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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!