Il segreto delle belle colonnine di Pinterest risiede in un javascript che calcola l’esatta altezza di ogni immagine postata e la posiziona in modo assoluto.

Per replicarlo utilizziamo le colonne CSS3 prendendo come base lo script originale di Pixel Height, modificato da kushsolitary.

<div id=”columns”>
     <div class=”pin”>
          <img src=”http://placekitten.com/400/300″ alt=”PlaceKitten” />
          <p>Jean shorts street art flexitarian … </p>
     </div>
     <div class=”pin”>
         <img src=”http://placekitten.com/g/400/300″ alt=”PlaceKitten” />
         <p>Leggings pour-over banksy, DIY wolf tattooed … </p>
     </div>
    <!– aggiunta indiscriminata di colonne –>
</div>

 Passiamo al foglio di stile:

 #columns { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; column-count: 3; column-gap: 15px; column-fill: auto; }

 .pin { -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; margin: 0 2px 15px; padding: 15px; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); background: #FEFEFE; background-image: linear-gradient(45deg, #FFF, #F9F9F9); }

column-count e column-gap implementati su #columns si rendono necessari per avere una migliore resa delle colonne.

L’aggiunta di column-break-inside: avoid; serve per evitare che l’immagine postata letteralmente cada sulla colonna seguente, obbligandola a rimanere entro i suoi confini.

Altro piccolo tweak da aggiungere per regolare il numero delle colonne a seconda del browser utilizzato (da escludere IE – non funziona):

@media all and (min-width: 960px) {
     #columns {
          column-count: 4; }
   }

 @media all and (min-width: 1170px) { #columns { column-count: 5; } }

 

All posts and images on ./lsd are under a copyleft licence and protected by Safe Creative; third party images are copyright of own creators.