5.6 xuan 相片墙 js特效创建li 添加img这里可以实现开始加载的时候动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 轩照片墙的特效让开始加载时动画</title>
<style>
{
margin: 0;
padding: 0;
border:none;
}
body,html,ul {
width:100%;
height:100%;
}
#oUl{
position: relative;
}
#oUl li{
width: 250px;
height: 360px;
box-shadow: 0 0 10px #000;
position: absolute;
/top:0;/
/left: 0;*/
list-style: none;
transform: rotateZ(220deg);
transition:all 1s;
background: #fff;

        /*样式就只能走到这里了想让它实现随机的排版就用js吧*/
    }
    #oUl .cur{
        position: absolute;
        top:50%!important;
        left:50%!important;
        /*background: red;*/
        transform: rotateZ(0deg) translate(-50%,-50%) scale(1.3)!important;
        z-index: 999;
    }
    img{
        width:100%;
        /*background-size: 100% 100%;*/
    }
</style>
<style></style>

</head>
<body>
<ul id="oUl">

</ul>
<script src="js/Underscore-min.js"></script>
<script>
//让图片在刚刷新加载的时候添加动画其实就是先分别创建 li 与 img 并添加他们
//然后在单独for 遍历 li 来设置每个 li 的不同位置不同角度这样他们在刷新加载的时候才有动画
window.onload = function (){
//1 找对象
var oUl =document.getElementById('oUl');
//3.1首先由最大的事件源创建 li 但是前提是先遍历 li 的个数这里我们给它 10 就是10张图片啦
for (var i = 0; i < 20; i++) {
//3,2创建li
var li = document.createElement('li');
oUl.appendChild(li);//添加 li 完成以后就在css 那里设置 li 的样式
// 5 . 创建图片
var pic = document.createElement('img');

        // 5.1 给li 添加 pic
        li.appendChild(pic);
        pic.src = 'xuan/xuan'+(i+1)+'.jpg'; //这里添加的 图片的 张数 要注意了
    }
    //2 .设置屏幕的width height
    var screenW = document.documentElement.clientWidth - 250;//水平方向的宽
    var screenH = document.documentElement.clientHeight - 360;
    // 4 当 li 被点击的时候 所发生的事件
    // 首先获取 lis
    var lis = oUl.children;
    //for 遍历
    for (var i = 0; i < lis.length; i++) {
        var li = lis[i];
        // 3.3给li设置 不同的位置
        // 3.3.1先给li 设置不同的角度
        var radoRace = _.random(0,360);
       // { //li.style.transform =' rotate(deg)';//先这样写万一写错}
        li.style.transform =' rotate('+ radoRace +'deg)';
        // 3.3.2给li 设置在屏幕上的不同的位置 就是 X Y  那么就考虑 屏幕的宽高了
        var randomX = _.random(0,screenW);//水平方向的坐标 就是指 X 可以是 0 到 360 deg 任意的数字
        var randomY = _.random(0,screenH);//注意 他们是不一样的效果 值在小括号里面的图片随机占整个屏
        //  var randomX =_.random()*screenW;//这种方式的图片都缩在左上角,但是被点击的那一张也还是实现居中的
        // var randomY =_.random()*screenH; // 注意观察 值写在外面与写在外面的不同
        //3.3.3赋值给 每个 li
        li.style.left = randomX + 'px';
        li.style.top = randomY + 'px';
       // 被点击的 那个 li 单独设置 类名(这些位移 都是在css 那里设置  )
      li.onclick = function () {//哪里个 li 被点击就触发
      // alert(0);
          for (var i = 0; i < lis.length; i++) {
                  lis[i].className = '';
          }
          this.className ='cur';
     //  console.log(this);
      }
    }
}

</script>
</body>
</html>

5.6 xuan 相片墙 js特效 创建li 添加img这里可以实现开始加载的时候动画

推荐阅读更多精彩内容

5.6 xuan 相片墙 js特效创建li 添加img这里可以实现开始加载的时候动画