In questo tutorial vediamo come creare un layout a griglia simile a quello di Pinterest. La disposizione particolare degli elementi è dovuto al fatto che per riempire gli spazi si procede in senso verticale. L’utilizzo dei css non è sufficiente in quanto con l’istruzione float possiamo ottenere esclusivamente un’ordinamento orizzontale.

layout grglia pinterest

Esistono diversi plugin jquery per realizzare layout di questo tipo. Molti di questi aggiungono effetti di animazione quando si ridimensiona la finestra del browser.

Il migliore tra quelli che ho provato è Masonry, sia per la semplicità della configurazione che per il risultato finale.

Lo script è stato utilizzato nell’home page di questo sito, nella sezione ‘ultimi articoli’

Librerie e file

Per il funzionamento del plugin è necessaria una versione di jquery pari o superiore a v1.6 e lo script scaricabile da questa pagina.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/path/to/jquery.masonry.min.js"></script>

html

La struttura del markup è semplice. Bisogna creare un div container principale e un div per ogni elemento della griglia. Ogni blocco può contenere immagini e testo o altri elementi html.
I nomi delle classi css possono variare, l’importante è però che  trovino corrispondenza nel codice css e jquery

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

CSS

Con i css decidiamo la larghezza di ogni blocco

.item {
  width: 220px;
  margin: 10px;
  float: left;
}

Script

Con lo script che inizializza il plugin indichiamo il selettore per il container (id #container), il selettore per la classe dei blocchi (.item) e la dimensione di ciascuna colonna. Il numero di colonne varia in base allo spazio a disposizione e alla dimensione di ciascuna colonna. La griglia proverà ad occupare il maggior spazio disponibile.

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});

Centrare gli elemeti

Demo elementi centrati

Centrare i blocchi è utile in quanto spesso asseconda delle dimensioni della finestra, rimane dello spazio vuoto a destra dell’ultima colonna.

È sufficiente aggiungere un’opzione nello script, e un’istruzione css

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240,
    isFitWidth: true
  });
});

#container {
    margin: 0 auto;
}

Elementi che occupano più colonne

È possibile fare in modo che un elemento occupi più colonne creando una classe alternativa a .item con grandezza ad esempio raddoppiata.

Demo multicolonna

Gliglia fluida

Negli esempio precedente la ogni elemento aveva una dimensione fissa. Per fare in modo che la dimensione cambi assieme a quella della dimensione del browser bisnga modificare lo script

Demo griglia fluida

$('#container').masonry({
  itemSelector: '.box',
  // set columnWidth a fraction of the container width
  columnWidth: function( containerWidth ) {
    return containerWidth / 5;
  }
});


  inStileWeb.com
blog comments powered by Disqus