Filtra la ricerca ...
Frase esatta
Categorie

Blocksit.js il plugin jQuery per creare griglie responsive

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

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

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.