原生JS实现照片墙(附github实现链接）

原生Javascript实现照片墙

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

具体页面（GitHub Page）

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

1.首先布局html:

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

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

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

				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界面的时候，感觉到了吃力，但是学习的过程本该如此

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

	<style>
			*{
				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;
			}
		</style>

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

				var allLis=ul.children;
				
				var screenW=document.documentElement.clientWidth-250;
				var screenH=document.documentElement.clientHeight-300;
				
				for(let i=0;i<allLis.length;i++){
					var li=allLis[i];
					
					li.style.left=_.random(0,screenW)+'px';
					li.style.top=_.random(0,screenH)+'px';
					
					li.style.transform='rotate('+_.random(0,360)+'deg)';
					
					li.onmouseover=function(){
						for(let j=0;j<allLis.length;j++){
							allLis[j].className='';
						}
						this.className='current';
					}
				}

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

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

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

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

li.onmouseover=function(){
						for(let j=0;j<allLis.length;j++){
							allLis[j].className='';
						}
						this.className='current';
					}

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

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