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

首先，我们需要简单的结构处理图片，为了方便操作，引用了一个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>

下载完整详细代码：点这里

js实现照片墙效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  5. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  6. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  7. 使用CSS3动画实现绚丽的照片墙效果

    临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...

  8. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

随机推荐

  1. 图片上传并回显Ajax异步篇

    图片上传并回显Ajax异步篇 图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果 在实战前呢,我们需要做些准备工作.比如说,了解一下FormD ...

  2. 牛客国庆集训派对Day4 J-寻找复读机

    链接:https://www.nowcoder.com/acm/contest/204/J 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 1048576K,其他语言20 ...

  3. java中实现Comparable接口实现自定义排序

    class Student implements Comparable{ String name; int gpa; @Override public int compareTo(Object arg ...

  4. 2017.5.11 Yarn

    Yarn在hadoop中的位置 Yarn的优点 YARN把JobTracker分为ResouceManager和ApplicationMaster,ResouceManager专管整个集群的资源管理和 ...

  5. LeetCode - Is Graph Bipartite?

    Given an undirected graph, return true if and only if it is bipartite. Recall that a graph is bipart ...

  6. 【BZOJ4552】【TJOI2016】【HEOI2016】排序

    经验还是不够…… 原题: 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对 ...

  7. 【BZOJ2427】【HAOI2010】软件安装

    无力吐槽…… 原题: 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最 ...

  8. IP、端口号、MAC

    1.端口 端口是TCP/IP协议簇中,应用层进程与传输层协议实体间的通信接口.端口是操作系统可分配的一种资源:应用程序通过系统调用与某端口绑定后,传输层传给改端口的数据都被相应进程接收,相应进程发给传 ...

  9. BINLOG和REDO/UNDO LOG的区别

    BINLOG和REDO/UNDO LOG的区别1.处理层次不同,REDO/UNDO LOG由Innodb存储引擎处理,而BINLOG由MySQL 服务层处理.2.记录内容不同,REDO/UNDO LO ...

  10. pipenv 方便的python 开发工作流工具

    pipenv 将 composer.bundler.npm.yarn.cargo 等比较方便的包管理工具添加到了python 语言中,可以 帮助我们自动的管理virtualenv ,同时可以方便的从p ...