用简单的js代码优化“CSS绚丽照片墙”课程

在课程中，老师讲解了用CSS3的rotate和scale属性制作一个照片展示效果，如图所示。
但是美中不足的地方在于每张图片都要单独的写一个CSS样式，来确定图片的位置和旋转的角度，这个真的是很麻烦。
但是用js的方法可以很轻松的实现，只是需要额外注意CSS样式的控制，必须在hover样式里面给transform加上!important，否则会被js的css样式给覆盖掉。
代码如下，大家可以参考下。
HTML的代码贴不上来，不知道为什么……就是很简单的把图片放在一个div里面，这里不多说了。
CSS代码：
body{
background-color:#eee;
}
h1{
text-align:center;
}
.container{
width:960px;
height:450px;
margin:60px auto;
position:relative;
}
.container img{
padding:10px 10px 15px;
background:white;
border:1px solid #ddd;
box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
position:absolute;
z-index:1;
}
.container img:hover{
box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
-webkit-transform:rotate(0deg) scale(1.20)!important;
-moz-transform:rotate(0deg) scale(1.20)!important;
transform:rotate(0deg) scale(1.20)!important;
z-index:2;
}
JS代码：
window.onload=function(){
var container=document.getElementById('container');
var image=container.getElementsByTagName('img');

for(var i=0;i<image.length;i++){
    var x=Math.random();
    var y=Math.random();
    var x1=x*100;
    if(i<5){    // 这里的i<5的话，图片在第一行显示
        x2=i*150+30;    
        y2=150;
    }else{    //else的i>=5，则后面的5张图片都是陈列在第二行，所以y2要大一些，这样离顶端的距离才会更大。
        x2=(i-5)*150+30;
        y2=350;
    }
    image[i].style.left=x2+"px";
    image[i].style.top=y2+"px";
    image[i].style.transform="rotate("+x1+"deg)";
}    

}