Archivio immagini inverso: impilando le immagini dal basso verso l'alto con CSS/Javascript?

Chiedersi se qualcuno ha una soluzione per questo.
Vorrei presentare un archivio di immagini in miniatura più vecchie in basso e più recenti in alto. Vorrei anche il flusso stesso per essere invertito ... qualcosa di simile:Archivio immagini inverso: impilando le immagini dal basso verso l'alto con CSS/Javascript?

reverse archive

La pagina dovrebbe essere allineata a destra, con le immagini future aggiunte alla parte superiore della pagina. Sto creando la pagina in modo dinamico con PHP estraendo nomi di file immagine da un DB MySQL. Il trucco qui è che mi piacerebbe che questo layout fosse fluido, il che significa che la maggior parte dei trucchi di PHP per il conteggio delle immagini e la costruzione dell'HTML di conseguenza vanno fuori dalla finestra.

C'è un modo per farlo con Javascript o anche solo CSS?

fonte

2011-10-21 filip

Quali browser/versioni devi supportare? Se la risposta è "solo moderna", puoi farlo solo con i CSS. – thirtydot

Solo quelli moderni andrebbero bene. – filip

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

Questo utilizza float: right-order the divs as required, poi transform: scaleY(-1)flips the entire container, ed infine transform: scaleY(-1) nuovo flips each individual image back.

Funzionerà in IE9 e versioni successive e in tutti i browser moderni.

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>

fonte

2011-10-21 21:23:52 thirtydot

Penso che il 'transform' sia una soluzione molto più complicata, quindi il solo backend PHP stampa gli elementi sulla pagina al contrario. –

+1 Una soluzione eccezionale! – andyb

@George Pittarelli: avere l'ordine invertito nell'HTML e quindi utilizzare uno dei seguenti comandi ['float: left'] (http://jsfiddle.net/thirtydot/pft6p/3/) o [' float: right'] (http : //jsfiddle.net/thirtydot/pft6p/4/) non raggiunge abbastanza l'effetto desiderato. – thirtydot

Il modulo CSS Flexible Box è stato creato per questo tipo di cose. Guarda un esempio veloce che ho inventato: http://jsfiddle.net/c6QLC/2/ (guarda questo in Firefox)

Ora la cattiva notizia: non puoi ancora fidarti ancora. Non solo la specifica viene riscritta, l'implementazione corrente non supporta box-lines (che ho incluso nell'esempio), il che consentirebbe agli elementi di essere in più righe anziché essere overflow.

La nuova specifica viene scritta nelle versioni di sviluppo di alcuni browser, quindi accadrà. È solo una questione di tempo.

Nel frattempo, forse qualcosa come Isotope potrebbe soddisfare le vostre esigenze.

caso si consiglia di controllare le specifiche, si può trovare qui: http://www.w3.org/TR/css3-flexbox/

fonte

2011-10-21 21:21:12 stephenhay

+1 come questo era quello che stavo cercando (http://jsfiddle.net/aeuRm/ per un esempio di webkit). È venuto attraverso lo stesso problema in quel box-line non funziona! – andyb

L'isotopo è davvero molto bello, grazie per avermelo presentato. – filip

Questo può essere risolto con il plugin jQuery in muratura. È un po 'come l'isotopo ma è gratuito per gli utenti privati e commerciali.

fonte

2012-07-20 00:11:53 Bytemain

Archivio immagini inverso: impilando le immagini dal basso verso l'alto con CSS/Javascript?

risposta

Problemi correlati