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 :
- Posiziona i blocchi da sinistra a destra
- 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.
Creare un documento HTML e richiamare la libreria jQuery ed il plugin Blocksit
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><script src="blocksit.js" type="text/javascript"></script> |
Ora un pò di jQuery da inserire prima delle chiusura del tag
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script>// <![CDATA[ $(document).ready(function() { //animazione header $('#header') .css({ 'top':-50 }) .delay(1000) .animate({'top': 0}, 800); //blocksit definizione delle colonne $(window).load( function() { $('#container').BlocksIt({ numOfCol: 5, offsetX: 8, offsetY: 8 }); }); //adattamento colonne in base alla risoluzione var currentWidth = 1100; $(window).resize(function() { var winWidth = $(window).width(); var conWidth; if(winWidth < 660) { conWidth = 440; col = 2 } else if(winWidth < 880) { conWidth = 660; col = 3 } else if(winWidth < 1100) { conWidth = 880; col = 4; } else { conWidth = 1100; col = 5; } if(conWidth != currentWidth) { currentWidth = conWidth; $('#container').width(conWidth); $('#container').BlocksIt({ numOfCol: col, offsetX: 8, offsetY: 8 }); } }); }); // ]]></script> |
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….
ed infine il CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
body{ margin:0; padding:0; background:#f7f5f5; color:#333; font-family: Verdana, Geneva, sans-serif; font-size:15px; overflow-x:hidden; } header, section, footer, hgroup{ display:block; } a { color:#35BFFF; text-decoration:none; } a:hover, a:active{ color:#91DCFF; } /* Header */ #header{ width:100%; background:#000; background:rgba(0, 0, 0, 0.8); padding:5px 0; letter-spacing:1px; margin-bottom:20px; position:fixed; top:0; left:0; z-index:99; } #backlinks{ float:right; padding:0 20px; line-height:22px; font-weight:bold; font-size:13px; } #backlinks a{ text-align:right; display:block; } /* Footer */ #footer{ width:100%; position:fixed; padding-left:20px; bottom:0; left:0; line-height:20px; color:#888; font-size:13px; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.8); z-index:99; } #footer span{ display:block; } /* clearfix */ .clearfix { clear:both; } /* wrapper css */ #wrapper{ margin-top:70px; width:100%; } #wrapper hgroup{ text-align:center; } #wrapper h1{ margin:5px 0; color:#333; text-shadow:1px 1px 2px #ccc; font-size:30px; font-family: Verdana, Geneva, sans-serif; } #wrapper h3{ font-style:italic; font-weight:normal; font-size:18px; text-shadow:1px 1px 0 #fff; color:#888; margin:5px 0; } #container{ position:relative; width:1100px; margin:0 auto 25px; padding-bottom: 10px; } .grid{ width:188px; min-height:100px; padding: 15px; background:#fff; margin:8px; font-size:12px; float:left; box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-transition: top 1s ease, left 1s ease; -moz-transition: top 1s ease, left 1s ease; -o-transition: top 1s ease, left 1s ease; -ms-transition: top 1s ease, left 1s ease; } .grid strong { border-bottom:1px solid #ccc; margin:10px 0; display:block; padding:0 0 5px; font-size:17px; text-transform:capitalize; } .grid .meta{ text-align:right; color:#777; font-style:italic; } .grid .imgholder img{ max-width:100%; background:#ccc; display:block; } @media screen and (max-width : 1240px) { body{ overflow:auto; } } @media screen and (max-width : 900px) { #backlinks{ float:none; clear:both; } #backlinks a{ display:inline-block; padding-right:20px; } #wrapper{ margin-top:90px; } } |
