js实现照片墙效果

2021-02-20 16:15发布

站内文章 / 后端开发

504 0

太酷不给撩

女 | 书童

私信

本次要实现的是一个照片墙的效果，如下图，很多图片随机的摆放在窗口中，当点击到某一张的时候，该张图片出现出现在窗口的水平垂直居中的位置。

首先，我们需要简单的结构处理图片，为了方便操作，引用了一个js库：underscore.js，因为图片的数量是不固定的，这里我们采用动态添加的方式生成li，再在li里面添加图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
            list-style: none;
        }

        html, body, ul{
            width: 100%;
            height: 100%;
        }

        #ps{
            position: relative;
        }

        #ps li{
            width: 250px;
            height: 360px;
            box-shadow: 0 0 10px #000;
        }
    </style>
</head>
<body>
   <ul id="ps"></ul>
<script src="js/Underscore-min.js"></script>
<script>
    window.onload = function () {
        var ps = document.getElementById("ps");

        //动态创建li标签
        for(var i=0; i<10; i++){
            //创建li标签
            var li = document.createElement("li");
            ps.appendChild(li);

            //创建img标签
            var img = document.createElement("img");
            img.src = "images/pic" + (i + 1) + ".jpg";
            li.appendChild(img);
        }
    }
</script>
</body>
</html>

此时是这种常规的li列表形式，我们需要让他们随机的出现在屏幕上，就需要使用定位处理，定位后的位置通过随机数产生，在随机分布前，还需要计算出可分布的范围。

//获取所有的li

var allLis = ps.children;

var screenW = document.documentElement.clientWidth - 250;

var screenH = document.documentElement.clientHeight - 360;

//遍历

for(var j=0; j<allLis.length; j++){

　　//取出单个li标签

　　var li = allLis[j];

　　//随机分布

　　li.style.left = _.random(0, screenW) + 'px';

　　li.style.top = _.random(0, screenH) + 'px';

　　//随机角度

　　li.style.transform = 'rotate(' + _.random(0, 360) +'deg)';

}

最后就添加点击事件了，当点击到某张图片时，该图片出现在屏幕居中位置，且层级最高，这里也是用css产生的效果，需要注意的是，前面的位置参数是通过js生成的，属于行内样式，所以在css的样式中，我们需要添加!important

#ps li.current{

　　left: 50% !important;

　　top: 50% !important;

　　transform: rotate(0deg) translate(-50%, -50%) scale(1.2, 1.2) !important;

　　z-index: 99;

}

//点击事件

li.onclick = function () {

　　for(var i = 0; i<allLis.length; i++){

　　　　allLis[i].className = '';

　　}

　　this.className = 'current';

}

至此，我们就实现了最开始想要的目标效果了，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
            list-style: 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.2, 1.2) !important;
            z-index: 99;
        }
    </style>
</head>
<body>
   <ul id="ps"></ul>
<script src="js/Underscore-min.js"></script>
<script>
    window.onload = function () {
        var ps = document.getElementById("ps");

        //动态创建li标签
        for(var i=0; i<10; i++){
            //创建li标签
            var li = document.createElement("li");
            ps.appendChild(li);

            //创建img标签
            var img = document.createElement("img");
            img.src = "images/pic" + (i + 1) + ".jpg";
            li.appendChild(img);
        }

        //获取所有的li
        var allLis = ps.children;

        var screenW = document.documentElement.clientWidth - 250;
        var screenH = document.documentElement.clientHeight - 360;

        //遍历
        for(var j=0; j<allLis.length; j++){
            //取出单个li标签
            var li = allLis[j];

            //随机分布
            li.style.left = _.random(0, screenW) + 'px';
            li.style.top = _.random(0, screenH) + 'px';

            //随机角度
            li.style.transform = 'rotate(' + _.random(0, 360) +'deg)';

            //点击事件
            li.onclick = function () {
                for(var i = 0; i<allLis.length; i++){
                    allLis[i].className = '';
                }
                this.className = 'current';
            }
        }
    }
</script>
</body>
</html>