js实现照片墙功能实例
本文实例讲述了js实现照片墙功能的方法。分享给大家供大家参考。具体实现方法如下：
<!doctypehtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:html5="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8">
<title>js照片墙</title>
<metahttp-equiv="X-UA-Compatible"content="edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<metaname="Keywords"content="js照片墙">
<metaname="description"content="js照片墙">
<linkhref="css/style.css"rel="stylesheet">
<scriptsrc="move.js"></script>
<style>
*{padding:0;margin:0;}
li{list-style:none;}
ul{width:660px;height:510px;background:#ccc;margin:20pxauto;}
li{width:200px;height:150px;margin:10px;float:left;}
</style>
<script>
/*
vararr=['a','b','c','d','e','d','f'];
varpos=arr.lastIndexOf('d');
alert(pos);
*/
window.onload=function(){
varaLi=document.querySelectorAll('li');
varoInput= document.querySelector('#btn');
varpos=[];
varlen=aLi.length;
varizIndex=2;
//布局转换
for(vari=0;i<len;i++){ pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]); } for(vari=0;i<len;i++){ aLi[i].style.left=pos[i][0]+'px'; aLi[i].style.top=pos[i][1]+'px'; aLi[i].style.position='absolute'; aLi[i].style.margin='0px'; } for(vari=0;i<len;i++){ aLi[i].index=i; setDrag(aLi[i]); } oInput.onclick=function(){ varrandomArr=[0,1,2,3,4,5,6,7,8]; randomArr.sort(function(num1,num2){ returnMath.random()-0.5; }) for(vari=0;i<len;i++){ //增加随机位置的情况 startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]}); //修正索引 aLi[i].index=randomArr[i]; } } //拖拽 functionsetDrag(obj){ obj.onmousedown=function(ev){ izIndex++; obj.style.zIndex=izIndex; varev=ev||event; vardisX=ev.clientX-obj.offsetLeft; vardisY=ev.clientY-obj.offsetTop; document.onmousemove=function(ev){ varev=ev||event; obj.style.left= ev.clientX-disX+'px'; obj.style.top= ev.clientY-disY+'px'; for(vari=0;i<len;i++){ aLi[i].style.border='none'; } varnL=nearLi(obj); if(nL){ nL.style.border='2pxsolidred'; } } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; varnL=nearLi(obj); if(nL){ nL.style.border='2pxsolidred'; startMove(obj,{left:pos[nL.index][0],top:pos[nL.index][1]}); startMove(nL,{left:pos[obj.index][0],top:pos[obj.index][1]}); vartmp=nL.index; nL.index=obj.index; obj.index=tmp; nL.style.border=''; }else{ startMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]}); } } returnfalse; } } //检测是否有碰撞 functionisDump(obj1,obj2){ varl1=obj1.offsetLeft; varr1=l1+obj1.offsetWidth; vart1=obj1.offsetTop; varb1=obj1.offsetHeight+t1;
varl2=obj2.offsetLeft; varr2=l2+obj2.offsetWidth; vart2=obj2.offsetTop; varb2=obj2.offsetHeight+t2; if(b2<t1||l2>r1||r2<l1||t2>b1){ returnfalse; }else{ returntrue; } } //寻找最近的节点 functionnearLi(obj){ varindex=-1; varvalue=9999; for(vari=0;i<len;i++){ if(isDump(obj,aLi[i])&&obj!=aLi[i]){ varc=getDis(obj,aLi[i]); if(c<value){ value=c; index=i; } } } if(index!=-1){ returnaLi[index]; }else{ returnfalse; } } functiongetDis(obj1,obj2){ varx=obj1.offsetLeft-obj2.offsetLeft; vary=obj1.offsetTop-obj2.offsetTop; return Math.sqrt(Math.pow(x,2)+Math.pow(y,2)); } } </script> </head> <body> <buttonid="btn">click</button> <ul> <li><imgsrc="1l.jpg"width="200px"height="150px"></li> <li><imgsrc="2l.jpg"width="200px"height="150px"></li> <li><imgsrc="3l.jpg"width="200px"height="150px"></li> <li><imgsrc="4l.jpg"width="200px"height="150px"></li> <li><imgsrc="5l.jpg"width="200px"height="150px"></li> <li><imgsrc="6l.jpg"width="200px"height="150px"></li> <li><imgsrc="1l.jpg"width="200px"height="150px"></li> <li><imgsrc="2l.jpg"width="200px"height="150px"></li> <li><imgsrc="4l.jpg"width="200px"height="150px"></li> </ul> </body> </html>