JS照片墙特效/简易

效果图：

单击任何一张图片，可旋转回正，并到中央位置

分析大体特效

点击图片可旋转回正：onclick/transform/rotate/translate/z-index
图片旋转的过渡：transition
图片叠加在一起：position定位
图片随机摆放，角度随机：随机数函数
多张图片：li标签/img标签/cursor：pointer

细节部分

无论取任何随机数，都不会超过边界
点击一张图片后，前面那张就失去回正的样式

HTML

<ul id="ps"></ul>

CSS

先写好li标签的基本样式。
再加一个当前回正图片的样式
最后就只需要获取被点击图片后，更改ClassName即可
current中需要把样式都加上！important
因为Js代码直接控制行内样式
行内样式优先级高于页内样式

*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
html,body,ul{
    width: 100%;
    height: 100%;
}
#ps{
    position: relative;
}
#ps li{
    width:250px;
    height: 360px;
    box-shadow: 0 0 10px #000;
    position: absolute;
    transition: all 1s;
}

#ps li.current{
    left: 50% !important;
    top: 50% !important;
    transform: rotate(0deg) translate(-50%,-50%) scale(1.5,1.5) !important;
    z-index: 99;
}

JS

由于图片数量多，直接使用循环创建img节点。放进li标签中。

for(var i=0;i<10;i++)
{
   var li=document.createElement("li");
    ps.appendChild(li);
    //创建img标签
    var img=document.createElement("img");
    img.src="图片/"+(i+1)+".jpg";
    li.appendChild(img);
    img.style.width = "250px";
    img.style.height = "360px";
}

图片的随机摆放：1、角度随机 2、位置随机

取随机数我使用的UnderScore库中的_.random()函数

1、首先遍历所有的li标签，规定位置的随机值在当前界面的内部。

由于每点击一张图片，就有一张图片拥有了current样式

2、为了避免：使用先清空，后设置的方法来设计

var ps = document.getElementById("ps");
var lis=ps.children;
var screenW=document.documentElement.clientWidth-250;
//获取当前页面的长宽-图片的长宽。可保证图片都活动在边界之内
var screenH=document.documentElement.clientHeight-360;

for(let j=0;j<lis.length;j++)
{
    //位置随机
    lis[j].style.left =  _.random(0,screenW)+"px";
    lis[j].style.top =  _.random(0,screenH)+"px";
    //角度随机
    lis[j].style.transform='rotate('+_.random(0,360)+'deg)';
    lis[j].onclick = function () {
    //排他思想的使用
            for (let m=0;m<lis.length;m++)
            {
                lis[m].className =' ';
            }
            lis[j].className = 'current';
    }
}