jQuery Masonry: un layout a griglia dinamico

L

Un layout a griglia porta diversi vantaggi ad un sito web: anzitutto si tratta di un design moderno che ha preso piede ormai da diversi anni e con il quale l’utente ha familiarità. In secondo luogo permette di sfruttare appieno le due dimensioni dello schermo, verticale e orizzontale distribuendo le informazioni lungo tutto lo spazio disponibile, a differenza dei layout a lista che si estendono solo lungo la dimensione verticale.

Un classico esempio potrebbe essere la visualizzazione a griglia di prodotti in un e-commerce piuttosto che le news di un sito web o una semplice galleria di immagini. Un design molto in voga sfrutta il concetto di card, ovvero elementi di griglia che contengono informazioni e contenuti complessi come foto, testo o pulsanti.

Progettare un layout a griglia può sembrare a primo sguardo semplice, ma in realtà è necessario prendere in considerazione diversi casi d’uso.

Caso base: layout a griglia di elementi con lo stesso contenuto

Che si tratti di testi della medesima lunghezza in caratteri o immagini dalla stessa altezza/larghezza progettare un layout a griglia in questo caso è estremamente banale. L’immagine seguente è l’esempio perfetto:

Questo layout lavora perfettamente se tutti gli elementi hanno un contenuto costante, per esempio la stessa lunghezza dei testi. In questo caso una semplice combinazione di codice html e css è sufficiente per ottenere il risultato.

Caso intermedio: layout a griglia con contenuto variabile

In uno scenario più comune in cui il contenuto dell’elemento sia variabile, sia per quanto riguarda testi che immagini che markup html, l’altezza del contenitore varia. Sia che si usi un CMS o che si scriva dell’html è importante rendere il contenitore flessibile e gestire tutti i possibili casi. Un layout a griglia con questi requisiti tuttavia viene facilmente compromesso e l’esempio seguente ne è la dimostrazione:

Come si può notare nonostante l’informazione sia chiaramente visibile sono presenti diversi spazi che “rompono” il layout. Una soluzione veloce e rapida potrebbe essere quella di assegnare a ciascun contenitore un’altezza fissa, come dimostra la schermata seguente:

Questa soluzione può essere efficace nel caso in cui si voglia ciascun elemento con la stessa altezza, la quale tuttavia non viene calcolata sulla base del contenuto ma viene impostata fissa da una regola CSS. Alternativamente è possibile scrivere del codice javascript custom e regolare tutti gli elementi alla stessa altezza dell’elemento con altezza maggiore. Per ragioni molteplici tuttavia questo approccio è altamente sconsigliato. Se da un lato si tratta di una soluzione rapida dall’altra porta con sè dei potenziali problemi:

• Alcuni elementi contengono dello spazio vuoto inutilizzato
• Non appena il contenuto si “allunga” il testo andrà automaticamente in overflow, facendo perdere dunque delle informazioni importanti
• La soluzione non è estensibile su tutti i device, in quanto la variazione della larghezza può portare inevitabilmente ad una variazione dell’altezza
• È altamente sconsigliabile scrivere del codice custom che vada a manipolare gli elementi del DOM, a meno che la necessità non sia fortemente giustificata.

Caso avanzato: jQuery masonry

Una soluzione rapida, estensibile ed elegante a questo problema è fornita da un plugin jQuery: masonry. Si tratta di un plugin jQuery completamente open source che conta oltre 12 mila stelle su github e oltre 2000 fork. La sua installazione richiede due minuti ed altrettanto la sua configurazione. Il resto viene fatto in automatico:

• Scaricare masonry dal sito web ed aggiungerlo tra gli script del sito web. In alternativo è possibile utilizzare il CDN. A meno che non si voglia effettuare debugging o ispezione del sorgente è consigliabile utilizzare la versione minificata
• Se si fa uso di bower è possibile includerlo in automatico tramite il comando:

bower install masonry-layout –save

• Strutturare la griglia in modo da attribuire una classe sia al contenitore esterno che a ciascun elemento della griglia, quest’ultima ovviamente dovrà essere la stessa per tutti gi elementi.
• Creare uno script custom o aggiungere ad uno script esistente il seguente snippet

$(‘.grid’).masonry({

itemSelector: ‘.grid-item’,

columnWidth: ‘.grid-sizer’,

usePercentage: true

});

Dove grid è il nome della classe del contenitore e grid-item il nome della classe degli elementi. La funzione masonry accetta un oggetto json di configurazione con almeno due parametri:

• itemSeletctor: selettore di classe corrispondente agli elementi della griglia
• columnWidth: larghezza della colonna, nel caso di layout responsive è necessario inserire un selettore di classe che contenga la regola della larghezza in percentuale.

Gli altri parametri sono opzionali e si rimanda alla documentazione per la lista completa.

Masonry si occupa automaticamente di disporre gli elementi formando una sorta di muro di mattoni, con ciascun elemento incastrato perfettamente rispetto agli altri:

Conclusioni

Questo plugin conferisce flessibilità ed eleganza quando si va a progettare un layout a griglia. Il suo utilizzo si presta a molteplici scenari e il risultato è sempre ottimo; questo articolo mostra un esempio molto banale, tuttavia Masonry è un progetto molto vasto, che comprende casi d’uso avanzati, come ad esempio l’integrazione con il framework Bootstrap. L’installazione e la configurazione inoltre richiedono pochi minuti e la documentazione online è ben sviluppata. Si tratta inoltre di un progetto open-source sotto licenza MIT, quindi è possibile ispezionare il codice sorgente o ancora meglio contruibuire attivamente al progetto presente su github.

Per una demo completa visitare il seguente link.