反向图像存档：使用CSS / Javascript从底部到顶部堆叠图像？ [英] Reverse image archive : stacking images from bottom to top with CSS / Javascript?

问题描述

想知道是否有人为此提供了解决方案。

我想提供一个缩略图像档案，这些缩略图像在底部是最早的，在最上方是最新的。我也想让流程本身被扭转...这样：

页面应该对齐，未来的图片会添加到页面顶部。我使用PHP从MySQL DB动态创建页面图像文件名。这里的catch是我喜欢这个布局是流动的，这意味着大多数PHP技巧计数图像和构建HTML相应地出窗口。

有一种方法

//jsfiddle.net/thirtydot/pft6p/rel =nofollow> http://jsfiddle.net/thirtydot/pft6p/

这使用 float：right 到订购 div 根据需要，然后 transform：scaleY（-1） 翻转整个容器，最后 transform：scaleY（-1） http://jsfiddle.net/thirtydot/pft6p/ =nofollow>返回每个单独的图像。

它将在IE9

 
 code> #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： b

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

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?

解决方案

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>

这篇关于反向图像存档：使用CSS / Javascript从底部到顶部堆叠图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！