Immagini in posizioni random

[Pimpinelli]

Ciao a tutti,
ho inserito in una pagina html 11 immagini con link di cui 10 di dimensioni uguali 190x190px e 1 di 380x380px.
Queste immagini si posizionano in modo random grazie a questo script

<script type="text/javascript">
window.onload = function()
{
   var elenco = document.getElementById('home')
   var immagini = elenco.getElementsByTagName('span')
   var contenuto = new Array()
      for (var i = 0; i < immagini.length; i++)
      {
         contenuto.push(immagini.item(i).innerHTML)
      }

   function numero_casuale()
   {
      var numero = Math.round(Math.random()) - 0.5
      return numero
   }
   contenuto.sort(numero_casuale)

   var codice = ''
   for (var i = 0; i < immagini.length; i++)
   {
      codice += '<span>' + contenuto[i] + '</span>'
   }
   elenco.innerHTML = codice
}
</script>

Il problema è che a seconda di dove va a rifinire l'immagine + grande scorre tutto e non si forma + un rettangolo.
Come posso limitare la posizione dell'immagine + grande solo in posizione 1-2-6-8 oppure sempre in posizione 2?
Grazie
----
Dimenticavo, le immagini si caricano una a fianco dell'altra in serie di 3 righe e 5 colonne, tutte fatte tramite i css con
<span>[img]images/quadratoVuoto.jpg[/img]</span>

[br1]

E come si puo' identificare dall'elenco quella di dimensioni maggiori?

[Pimpinelli]

Ciao
grazie per la tua risposta…
Questa formula, così com'è, non lo permette ma ogni immagine (non da database ma già definite nella pagina)ha un id e con quello si potrebbe identificarla.

[br1]

Mi pare che gli elementi non ci siano tutti... ma quando le "mischi" non e' detto che quella che precedentemente aveva dimensioni superiori le mantenga? Dacci almeno un'idea della struttura che le conterra' ed un esempio della situazione di partenza e di quella (fra le tante) di arrivo... e spiega meglio il significato del tuo ultimo intervento

[Pimpinelli]

Ciao,
allora io ho 12 immagini di cui 11 sono dimensioni 190x190 e una 380x380 (serve per esse più visibile.
L'immagine grande rimane sempre la stessa e deve solo cambiare la posizione.
Qui vedi l'esempio di 3 reload della pagina.
nei primi due casi il risultato è ottimale ma nel 3° non torna nella griglia creata.
L'immagine grande rimane sempre la stessa deve solo cambiare la posizione.

[br1]

Vado un pochino ad intuito... non mi e' tutto chiaro

<script type="text/javascript">
window.onload = function() {
	var elenco = document.getElementById('home')
	var immagini = elenco.getElementsByTagName('span')
	g = ""; // la grande
	var contenuto = new Array()
	for (var i = 0; i < immagini.length; i++) {
		if(immagini.item(i).firstChild.width==380) {
			g = immagini.item(i).innerHTML;
		} else {
			contenuto.push(immagini.item(i).innerHTML)
		}
	}

	function numero_casuale() {
		var numero = Math.round(Math.random()) - 0.5
		return numero
	}
	contenuto.sort(numero_casuale)
	
	// determino la posizione della grande
	n = -1; // posizione di destinazione della grande
	do {
		x = Math.floor(Math.random()*immagini.length)
		if(x==1||x==2|x==6|x==8) n = x-1; // gli indici partono da 0
	} 	while (n==-1);
	// oppure se la voglio sempre in posizione 2 (indice 1) decommenta la successiva
//	n = 1;
	// sposto le ultime e inserisco g nella posizione n
	for(var i=immagini.length;i>n;i--) {
		contenuto[i]=contenuto[i-1];
	}
	contenuto[n] = g;

	var codice = ''
	for (var i = 0; i < immagini.length; i++)
	{
		codice += '<span>' + contenuto[i] + '</span>'
	}
	elenco.innerHTML = codice
}
</script>

ciao