原生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的使用，不足之處還望海涵。