先分析實現(xiàn)思路

需要一個容器，作為頭像顯示的區(qū)域。
容器內(nèi)部需要頭像圖片作為展示。
隨機每個頭像的大小，位置，層級。
頭像位置隨機范圍要減去等于該頭像寬高，以限制隨機范圍不溢出容器。

樣式

代碼如下:

*{ margin:0; padding:0;}   
.Icon-Box{ width:960px; height:700px; margin:0 auto; position:relative;}   
.Icon-Box li{ position:absolute; list-style:none;}   
.Icon-Box li img{ width:100%;}  

HTML代碼如下:

<ul class="Icon-Box">   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
<li><img src="xx.jpg" /></li>   
</ul> 

jquery腳本代碼如下:

function randomICON(){   
//獲取LI作為隨機展示的盒子   
var $ico = $(".Icon-Box li");   
//獲取顯示容器的寬度   
var $width = $(".Icon-Box").width();   
//獲取顯示容器的高度   
var $height = $(".Icon-Box").height();   
//通過循環(huán)為每一個盒子設(shè)置單獨的屬性   
for(i=0;i < $ico.length;i++){   
//隨機一個個整數(shù)最小為10，將影響圖片大小，層級位置，透明度，位置   
var zindex = Math.floor(Math.random()*110)+10;   
$ico.eq(i).css({"z-index":zindex+'px',   
width:zindex+'px',   
height:zindex+'px',   
//隨機寬高度減去zindex以防止溢出顯示容器。   
left:Math.floor(Math.random()*($width-zindex))+"px",   
top:Math.floor(Math.random()*($height-zindex))+"px",   
opacity:zindex/100   
});   
}   
}   
randomICON(); 

上面插入的腳本可能看不清，弄個編輯器里面的截圖出來了。