js+css3随机排列照片墙展示特效

js代码

<script type="text/javascript">
	window.addEventListener('load',function(){
		//获取事件源
		var ul = document.getElementById('ul');
		//获取图片可活动区域
		var windowW = document.documentElement.clientWidth - 340;
		var windowH = document.documentElement.clientHeight - 191;
		//循环遍历
		for(var i=0;i<10;i++){
			//创建li标签
			var li = document.createElement('li');
			//追加到ul的子元素
			ul.appendChild(li);
			//创建img标签
			var img = document.createElement('img');
			li.appendChild(img);
			// 动态插入图片
			img.setAttribute('src','img/'+i+'.jpg');
		}
		//获取所有的li 
		var allLi = ul.children;
		//遍历
		for(var j=0;j<allLi.length;j++){
			//取出单个li
			var li = allLi[j];
			//随机获取位置
			li.style.left = parseInt(Math.random() * windowW) + 'px';
			li.style.top = parseInt(Math.random() * windowH) + 'px';
			//获取随机角度
			li.style.transform = 'rotate(' + Math.random() * 360 + 'deg)';
			//监听点击事件
			li.addEventListener('click',function(){
				for(var i=0;i<allLi.length;i++){
					allLi[i].className = '';
				}
				this.className = 'checked';
			});
		}
	})
</script>