Blocksit.js il plugin jQuery per creare griglie responsive

Per questo articolo sono disponibili Demo Download Script Download blocksit.js

Blocksit.js è un plugin jQuery utilizzato per creare layout HTML con griglie dinamiche, converte gli elementi HTML in blocchi e li posiziona in un griglia utilizzando la proprietà CSS “absolute”; in pratica è in grado di calcolare automaticamente le posizioni “top” e “left” utilizzando questo criterio :

  1. Posiziona i blocchi da sinistra a destra
  2. Posiziona i nuovi blocchi sotto i blocchi più piccoli

E’ sufficiente specificare il numero di colonne da utilizzare ed il plugin farà il resto, facile no ?

Come creare un layout in stile Pinterest

Sfruttando le potenzialità di questo plugin, scriviamo un piccolo script per creare un layout a griglie responsive in stile Pinterest, come quesllo in figura.

come creare layout stile pinterest

Creare un documento HTML e richiamare la libreria jQuery ed il plugin Blocksit

 Ora un pò di jQuery da inserire prima delle chiusura del tag

ora il codice l’HTML (per motivi di spazio non incollo tutto il codice, a fine pagina come sempre trovate il file sorgente e la demo)

antilope

Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo….

by Autore

ed infine il CSS

http://ad.zanox.com/ppc/?43729199C765911427T

Commenta l'articolo

Bisogno di postare codice ? Usa un servizio gratuito come Codeshare altrimenti WordPress formatta male il codice!

Pin It on Pinterest

Condividi l'articolo. Grazie.

Vuoi essere aggiornato ?