The example in this article describes how to implement the photo wall function in js. Share it with everyone for your reference. The specific implementation method is as follows:
js照片墙
<script><br>
/*<br>
var arr=['a','b','c','d','e','d','f'];<br>
var pos = arr.lastIndexOf('d');<br>
alert(pos);<br>
*/<br>
window.onload=function(){<br>
var aLi = document.querySelectorAll('li');<br>
var oInput = document.querySelector('#btn');<br>
var pos = [];<br>
var len= aLi.length;<br>
var izIndex= 2;<br>
//布局转换<p> for(var i=0;i<len;i ){<br />
pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]);<br />
}<br />
for(var i=0;i<len;i ){<br />
aLi[i].style.left=pos[i][0] 'px';<br />
aLi[i].style.top=pos[i][1] 'px';<br />
aLi[i].style.position = 'absolute';<br />
aLi[i].style.margin = '0px';<br />
}<br />
for(var i=0;i<len;i ){<br />
aLi[i].index = i;<br />
setDrag(aLi[i]);<br />
} <br />
oInput.onclick=function(){<br />
var randomArr = [0,1,2,3,4,5,6,7,8];<br />
randomArr.sort(function(num1,num2){<br />
return Math.random()-0.5;<br />
})<br />
for(var i=0;i<len;i ){<br />
//增加随机位置的情况<br />
startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});<br />
//修正索引<br />
aLi[i].index = randomArr[i];<br />
} <br />
}<br />
//拖拽<br />
function setDrag(obj){<br />
obj.onmousedown =function(ev){<br />
izIndex ;<br />
obj.style.zIndex= izIndex;<br />
var ev = ev || event;<br />
var disX = ev.clientX - obj.offsetLeft;<br />
var disY = ev.clientY - obj.offsetTop;<br />
document.onmousemove=function(ev){<br /> var ev = ev || event;<br />
obj.style.left = ev.clientX- disX 'px';<br />
obj.style.top = ev.clientY - disY 'px';<br />
for(var i=0; i<len; i ){<br />
aLi[i].style.border='none';<br />
} <br />
var nL = nearLi(obj); <br />
if(nL){<br />
nL.style.border='2px solid red';<br />
} <br />
}<br />
document.onmouseup= function(){<br />
document.onmousemove = null;<br />
document.onmouseup = null;<br />
var nL = nearLi(obj); <br />
if(nL){<br />
nL.style.border='2px solid red';<br />
startMove(obj,{left:pos[nL.index][0],top:pos[nL.index][1]});<br />
startMove(nL,{left:pos[obj.index][0],top:pos[obj.index][1]});<br />
var tmp =nL.index;<br />
nL.index = obj.index;<br />
obj.index = tmp;<br />
nL.style.border='';<br />
}else{<br />StartMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});<br />
}
return false;
}<br />
}<br />
//Detect whether there is a collision<br />
function isDump(obj1,obj2){<br />
var l1= obj1.offsetLeft;<br />
var r1= l1 obj1.offsetWidth;<br />
var t1= obj1.offsetTop;<br />
var b1 =obj1.offsetHeight t1;<br /><p> var l2= obj2.offsetLeft;<br />
var r2= l2 obj2.offsetWidth;<br />
var t2= obj2.offsetTop;<br />
var b2 =obj2.offsetHeight t2;<br />
If(b2<t1 || l2>r1 || r2<l1 || t2>b1){<br>
return false;
}else{<br>
return true;<br>
}<br>
}<br>
//Find the nearest node<br>
function nearLi(obj){<br>
var index= -1;<br>
var value =9999;<br>
for(var i=0; i<len; i){<br>
If(isDump(obj,aLi[i]) && obj !=aLi[i]){<br>
var c = getDis(obj,aLi[i]);<br>
If(c <value){<br>
value = c;
index = i;<br>
}
}
If(index !=-1){<br>
Return aLi[index];<br>
}else{<br>
return false;
}<br>
}<br>
function getDis(obj1,obj2){<br>
var x = obj1.offsetLeft - obj2.offsetLeft;<br>
var y = obj1.offsetTop - obj2.offsetTop;<br>
Return Math.sqrt(Math.pow(x,2) Math.pow(y,2));<br> }<br>
}<br>
</script>
click
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
