jQuery: griglie CSS dinamiche

Sistemare le dimensioni degli elementi all'interno di una griglia CSS è da sempre stato un compito che richiede l'uso di diverse classi, a seconda del numero di elementi presenti su ciascuna riga. Lo spazio deve essere ripartito in modo uniforme e fino all'avvento di jQuery l'unico modo per realizzare questo effetto era quello di aggiungere le classi manualmente. Ora non più. Infatti con jQuery possiamo aggiungere tali classi semplicemente verificando quanti elementi sono presenti in una riga. Vediamo come.

Partiamo da questa marcatura:


<ul id="grid">

	<li>
	
		<div class="box">Box 1</div>
		<div class="box">Box 2</div>
		<div class="box">Box 3</div>
	
	</li>
	
	<li>
	
		<div class="box">Box 4</div>
		<div class="box">Box 5</div>
	
	</li>
	
	<li>
		<div class="box">Box 6</div>
	</li>

</ul>

Lo schema di elementi segue la serie 3-2-1. Ecco il nostro CSS:


#grid {
	width: 600px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	height: 100%;
	overflow: hidden;
}

#grid li {
	height: 100%;
	overflow: hidden;
	padding-bottom: 1em;
}

div.box {
	background: #ffc;
	border: 1px solid #999;
	height: 10em;
	line-height: 10;
	text-align: center;
	float: left;
}

div.three {
	width: 189px;
	margin-right: 5px;
}

div.two {
	width: 286px;
	margin-right: 5px;
}

div.one {
	width: 582px;
	float: none;
}

Le classi three, two e one impostano la dimensione e la spaziatura tra gli elementi e vanno applicate con jQuery rispettivamente agli elementi della prima, seconda e terza riga:


$(function() {

  $('li', '#grid').each(function() {
  
    var $li = $(this);
    var $box = $('div.box', $li);
    var len = $box.length;
    
    switch(len) {
    
      case 3:
        $box.addClass('three');
        break;
      case 2:
        $box.addClass('two');
        break;
      case 1:
        $box.addClass('one');
        break;
      default:
        break;
    
    }
    
  
  
  });

});

Un semplice costrutto switch sul numero di elementi restituito dalla proprietà length ed abbiamo ottenuto il nostro effetto finale.

Potete visionare l'esempio finale in questa pagina.

Torna su