Allineare immagini flottanti con altezze diverse

Una grossa lacuna della disposizione di immagini con il solo Html è che, quando le immagini flottano, se sono di diversa altezza, fra l'una e l'altra possono rimanere fastidiosi margini, o meglio, spazi vuoti.

Quello che spieghiamo in questo articolo è un sistema basato su javascript che ci consente di allineare perfettamente le immagini,incastrandole fra loro, senza spazi superflui.

Esempio immagini flottantiIl sistema presentato è basato su javascript e l'effetto finale sarà quello visibile in questa demo.

Il principio di funzionamento è semplice.
Anzitutto, verifichiamo l'altezza di ciascuna immagine per valutare in quale punto inserirla.
E' sufficiente poi posizionare le immagini con metodo relativo ed il gioco è fatto.

Sarà javascript ad occuparsi sia del controllo delle immagini, sia della disposizione all'interno dle blocco contenitore e lo script è semplicissimo, oltre che compatibile con la maggior parte dei browser.

Vediamo lo script nel dettaglio, ad iniziare con la parte Html, che è molto semplice e le immagini possono anche essere prelevate da database. Consiste infatti solo di un div con id="gallery", contenente le immagini.

Il codice Javascript, anch'esso molto semplice, contiene il seguente core, che è quello che si occupa di riposizionare le immagini:

// imgs è l'array che contiene le immagini
var totLeftH = 0; // setta l'altezza della colonna sinistra
var totRightH = 0; // setta l'altezza della colonna sinistra

for(i=0; i<imgs.length; i++){ // effettua il posizionamento immagine per immagine
    var imgH = imgs[i].offsetHeight;
    var cOffsetTop = imgs[i].offsetTop; // Current Top offset
    var cOffsetLeft = imgs[i].offsetLeft; // Current Left offset

    if( i==0 || (totRightH + imgH)>(totLeftH+imgH)){ // inserisce l'immagine sulla sinistra
        var mBR = (totLeftH==0)? 0 : mB;
        var posTop = (totLeftH+mBR) - cOffsetTop; // calcola il margine verticale
        var posLeft = 0 - cOffsetLeft; // calcola il margine sinistro
        setPos(imgs[i], posLeft, posTop); // lancia la funzione che posiziona l'immagine
        totLeftH = totLeftH + imgH + mBR; // ricalcola l'altezza totale della colonna sinistra
    } else { // posiziona l'immagine a destra
        var mBR = (totRightH==0)? 0 : mB;
        var posTop = (totRightH+mBR) - cOffsetTop;
        var posLeft = pL - cOffsetLeft;
        setPos(imgs[i], posLeft, posTop);
        totRightH = totRightH + imgH + mBR;
    }
}

// Effettua il posizionamento delle immagini
function setPos(obj, posLeft, posTop){
    obj.style.position = 'relative';
    obj.style.left = posLeft+'px';
    obj.style.top = posTop+'px';
}

Come si vede, lo script è molto semplice, e funziona sostanzialmente in questo modo:

  • Viene creato un array con le immagini;
  • Attraverso un ciclo for si esamina ciascuna immagine;
  • Se l'altezza della colonna destra, comprensiva dell'immagine successiva, supera l'altezza di quella sinistra, l'immagine viene messa a sinistra, altrimenti a destra;
  • Lo script calcola la nuova posizione dell'immagine, in maniera da accostarla alla precedente, nella corretta colonna;
  • Viene posizionata l'immagine e poi aggiornata l'altezza totale della relativa colonna, con l'aggiunta dell'altezza della nuova immagine.

Tutto molto semplice!

Potrai scaricare la demo completa da quì, ma ricorda che questa versione è rilasciata per solo scopo dimostrativo, e può essere utilizzata, senza modifiche, solo su siti o progetti personali.

Per usi commerciali, o per l'integrazione su siti a carattere commerciale, oppure per poter apportare modifiche, sono previste delle licenze commerciali a costi simbolici.
Se interessato contattaci come ritieni più opportuno.

Pubblicato il 14-08-2012

Articoli correlati

1. Html5, il markup web del futuro del 08-03-2012

Lascia un commento

  • Codice antirobot975L'immagine mostra una V (maiuscola), il numero 3 e la lettera f (minuscola)4
  • Inserisci codice

Tutti i commenti (0)

navigazione

CERCA NEL BLOG
LE CATEGORIE DEL BLOG
ALTRE RISORSE