JavaScript 实现随机分布头像效果

JavaScript 实现随机分布头像效果

首先查看效果示意图。

该效果实现起来非常简单。

接下来编写 HTML 结构部分。

 
<ul>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
<li><img src="i.jpg" alt="" /></li>
</ul>

接着设置 CSS 样式。

 
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%;}

最后编写少量的 JavaScript 代码。

 
(function(){
var ul=document.getElementsByTagName('ul')[0];
var li=ul.getElementsByTagName('li');
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;//层级 基本随机数
s.width = s.height = s.zIndex + 'px';//宽高
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;//透明度
s.filter = 'alpha(opacity=' + s.zIndex + ')';
s.alpha = s.zIndex;
} 
})() 

最终效果表现为：头像尺寸越大，其 z-index 层级越高，同时透明度越低。若外层 ul 容器足够大，这种层级和透明度的差异将更加明显。