Javascript code for randomly displaying the Avatar

First look at the figure:

A simple Effect
First, html Copy codeThe Code is as follows: <ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>

CssCopy codeThe Code is as follows: ul, li {margin: 0; padding: 0 ;}
Ul {position: relative; width: 100%; height: 333px ;}
Li {border: 4px solid gray; border-radius: 3px; list-style: none ;}
Img {width: 100%; height: 100% ;}

Slightly smaller jsCopy codeThe Code is as follows: (function (){
Var ul = document. getElementsByTagName ('ul ') [0];
Var li = ul. getElementsByTagName ('lil ');
For (var I = 0, l = li. length; I <l; I ++ ){
Var s = li [I]. style;
S. position = 'absolute ';
S. zIndex = Math. floor (Math. random () * 90) + 10; // hierarchical basic random number
S. width = s. height = s. zIndex + 'px '; // width and height
S. left = Math. floor (Math. random () * (ul. offsetWidth-s.zIndex) + 'px ';
S. top = Math. floor (Math. random () * (ul. offsetHeight-s.zIndex) + 'px ';
S. opacity = s. zIndex/100; // transparency
S. filter = 'Alpha (opacity = '+ s. zIndex + ')';
S. alpha = s. zIndex;
}
})()

The final result is: the higher the header level, the lower the transparency. If the outer ul is large enough, the level is clearer.