原生Javascript实现照片墙

January 17, 2020 1826

原生Javascript实现照片墙

最近跟着网易云课堂的JS学习视频的案例篇实现了一个类似这样的界面：

示例

实现思路很简单，大致如下：

1.首先布局html:

仅一个ul标签，其余元素之后再通过JS添加

2.通过js循环添加图片与元素：

1
2
3
4
5
6
7
8
var ul=document.getElementById('ps');
for(let i=1;i<=10;i++){
var li=document.createElement('li');
ul.appendChild(li);
var img=document.createElement('img');
img.setAttribute('src','img/'+i+'.jpg');
li.appendChild(img);
}

这里通过循环写入新的元素，省去了html定义重复元素的麻烦，但是注意图片格式要统一命名，以序号区分

3.定义CSS样式：

个人对CSS的理解薄弱，不停地面向百度写CSS
所以在实现这个CSS界面的时候，感觉到了吃力，但是学习的过程本该如此

“我本凡尘，然心向天空。”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    
*{
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;/*去掉点点*/
    background: url(img/beijing.jpg) no-repeat;
    background-size:cover;
    back;
}

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

#ps{
    position: relative;
}
#ps li{
    width:100px;
    height: 100px;
    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(2,2) !important;
    z-index: 99;
}
img {
    width:200px;
}

4.随机将元素分配到屏幕的各个位置并设置CSS属性：

1
2
3
4
5
6
var allLis=ul.children;

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

for(let i=0;i

``

首先通过allLis获取到ul的子标签，也就是我们第二步添加的li标签

1
2
var screenW=document.documentElement.clientWidth-250;
var screenH=document.documentElement.clientHeight-300;

通过screenW和screenH获取到屏幕的大小，从而进行接下来的随机分配位置
这里用到了underscore.js这个库，实际上可以通过内置的Math对象实现相同的操作。

5.通过JS的onmouseover事件设置鼠标当前所指的元素

1
2
li.onmouseover=function(){
                        for(let j=0;j

`

这里是写在循环中的，用于监听点击事件，并将当前所指的CSS属性进行调整。

大致思路就是上述内容，代码简单而且容易实现，写下这篇博客其实是为了熟悉markdown的使用，不足之处还望海涵。

` ``