Archivo de imágenes inversas: ¿apila imágenes de abajo hacia arriba con CSS/Javascript?

Preguntándose si alguien tiene una solución para esto.
Me gustaría presentar un archivo de imágenes en miniatura más antiguas en la parte inferior y las más nuevas en la parte superior. También me gustaría que el propio flujo se invierta ... algo como esto:Archivo de imágenes inversas: ¿apila imágenes de abajo hacia arriba con CSS/Javascript?

reverse archive

La página debe estar alineado a la derecha, con futuras imágenes añadidas a la parte superior de la página. Estoy creando la página dinámicamente con PHP extrayendo nombres de archivo de imagen de un DB MySQL. El truco aquí es que me encantaría que este diseño sea fluido, lo que significa que la mayoría de los trucos de PHP para contar imágenes y construir el HTML en consecuencia salen por la ventana.

¿Hay alguna manera de hacer esto con Javascript o incluso con CSS?

Fuente

2011-10-21 filip

¿Qué navegadores/versiones necesita soportar? Si la respuesta es "solo las modernas", puedes hacerlo con solo CSS. – thirtydot

Solo las modernas estarían bien. – filip

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

Esto utiliza float: right a order the divs as required, entonces transform: scaleY(-1)flips the entire container, y por último transform: scaleY(-1) nuevo flips each individual image back.

Funcionará en IE9 y en todos los navegadores modernos.

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>

Fuente

2011-10-21 21:23:52 thirtydot

Creo que la 'transformación' es una solución mucho más complicada que simplemente tener el backend PHP imprimiendo los elementos en la página al revés. –

+1 ¡Una solución increíble! – andyb

@George Pittarelli: Tener la orden invertida en el HTML y luego usar cualquiera de ['float: left'] (http://jsfiddle.net/thirtydot/pft6p/3/) o [' float: right'] (http : //jsfiddle.net/thirtydot/pft6p/4/) no logra el efecto deseado. – thirtydot

El Módulo de caja flexible CSS está hecho para este tipo de cosas. Vea un ejemplo rápido que aumenté: http://jsfiddle.net/c6QLC/2/ (mire esto en Firefox)

Ahora las malas noticias: no se puede confiar en ellas todavía. No solo se está reescribiendo la especificación, la implementación actual no es compatible con box-lines (que incluí en el ejemplo), lo que permitiría que los artículos se encuentren en varias filas en lugar de desbordarse.

La nueva especificación se está escribiendo en las versiones de desarrollo de algunos navegadores, por lo que sucederá. Es solo cuestión de tiempo.

Mientras tanto, tal vez algo como Isotope pueda satisfacer sus necesidades.

en caso de que desee comprobar fuera de la especificación, se puede encontrar aquí: http://www.w3.org/TR/css3-flexbox/

Fuente

2011-10-21 21:21:12 stephenhay

+1 ya que esto era lo que estaba intentando (http://jsfiddle.net/aeuRm/ para un ejemplo de webkit). ¡Se encontró con el mismo problema en que las líneas de caja no funcionan! – andyb

Isótopo es realmente genial, gracias por presentarmelo. – filip

Esto se puede solucionar con el plugin jQuery mampostería. Es un poco como un isótopo, pero sin costo para usuarios privados y comerciales.

Fuente

2012-07-20 00:11:53 Bytemain

Archivo de imágenes inversas: ¿apila imágenes de abajo hacia arriba con CSS/Javascript?

Respuesta

Cuestiones relacionadas