你没理解透，其实js部分算法不复杂，慢慢推可以推出来。

你是不是 css3的东西不熟悉？

就是一个模板插入一个变量的意思

我这里提供一个方法，

如果要实现均匀分布，这里不能用random（）随机获得的数字来给每个元素的旋转角度赋值（圆形分布），也不需要分左右两部分了。假定你有x个元素要均匀分布，那么每两个元素之间的夹角就是180/x，然后用for in方法遍历，

for (n in imgs){

       var img = imgs[n];

       var x = imgs.length; 

       (function (deg){

           var index = n;     //获得索引值      

           img.style['transform'] = 'rotate('+-index*360/x+'deg) scale(.7) translateY(-1000px)';

       })(n);

这里用了立即调用函数的方法来旋转每个元素，如果直接写 img.style['transform']的话，n的值在循环完成之后会赋值给所有的元素的rotate，导致全部重叠（这里应该还有其他的方法解决这个问题但我还没想到）。

这样就到均匀分布了，但有一个问题是   点击元素时并不一定会全部重新排列位置。

//前端新手，欢迎指正。。

防止可透视

我这里有一份，和老师讲的稍微有点区别，不过大体实现了，因为有些地方，按老师的写，不知道怎么不兼容，你要吗？

刚做了

圆形效果

各位看看行不行

修改 rsort 函数

将下面内容删除或注销

// 把海报分为左、右区域两个部分
 var photos_left = photos.splice(0, Math.ceil(photos.length/2));
 var photos_right = photos;

 for( s in photos_left ){
    var photo = photos_left[s];

    photo.style.left = random(ranges.left.x)+"px";
    photo.style.top = random(ranges.left.y)+"px";

     photo.style['transform'] = 'rotate('+random([-80,80])+'deg) scale(1)';
 }
 for( s in photos_right ){
     var photo = photos_right[s];

     photo.style.left = random(ranges.right.x)+"px";
     photo.style.top = random(ranges.right.y)+"px";

     photo.style['transform'] = 'rotate('+random([-80,80])+'deg) scale(1)';
}

在删除内容上添加新的内容

var ranges = range();
for( s in photos){
   var photo = photos[s];
   var ang = random([0,360])
   var avg = ang*2*Math.PI/360;
   var ang = -ang;
   photo.style['transform'] = 'translate('+500*Math.sin(avg)+'px,'+500*Math.cos(avg)+'px) rotate('+ang+'deg) scale(1)';
    // 500 为半径值;
}

修改完成，如有疑问，请回复

把span标签设为{width: 30px;
            height: 30px;
            display: inline-block;
            border-radius: 50%;}四项设置缺一不可。