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>