This paper illustrates the method of realizing the function of photo wall with JS. Share to everyone for your reference. The implementation methods are as follows:
<!doctype html>
<html xmlns= "http://www.w3.org/1999/xhtml" xmlns:html5= "http://www.w3.org/1999/xhtml" >
<head>
<meta charset= "Utf-8" >
<title>js Photo Wall </title>
<meta http-equiv= "x-ua-compatible" content= "Edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<meta name= "Keywords" content= "JS photo Wall" >
<meta name= "description" content= "JS photo Wall" >
<link href= "Css/style.css" rel= "stylesheet" >
<script src= "Move.js" ></script>
<style>
*{padding:0; margin:0;}
Li{list-style:none;}
ul{width:660px height:510px; background: #ccc; margin:20px auto;}
li{width:200px; height:150px; margin:10px; float:left;}
</style>
<script>
/*
var arr=[' A ', ' B ', ' C ', ' d ', ' e ', ' d ', ' F ';
var pos = arr.lastindexof (' d ');
Alert (POS);
*/
Window.onload=function () {
var aLi = document.queryselectorall (' li ');
var oinput = document.queryselector (' #btn ');
var pos = [];
var len= ali.length;
var izindex= 2;
Layout transformation
for (Var i=0;i<len;i++) {
Pos.push ([ali[i].offsetleft,ali[i].offsettop]);
}
for (Var i=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 (Var i=0;i<len;i++) {
Ali[i].index = i;
Setdrag (Ali[i]);
}
Oinput.onclick=function () {
var Randomarr = [0,1,2,3,4,5,6,7,8];
Randomarr.sort (function (num1,num2) {
Return Math.random ()-0.5;
})
for (Var i=0;i<len;i++) {
Increase the random position of the situation
Startmove (Ali[i],{left:pos[randomarr[i]][0],top:pos[randomarr[i]][1]});
Fixed index
Ali[i].index = Randomarr[i];
}
}
Drag
function Setdrag (obj) {
Obj.onmousedown =function (EV) {
izindex++;
Obj.style.zindex= Izindex;
var ev = EV | | Event
var disx = Ev.clientx-obj.offsetleft;
var disy = ev.clienty-obj.offsettop;
Document.onmousemove=function (EV) {
var ev = EV | | Event
Obj.style.left = ev.clientx-disx + ' px ';
Obj.style.top = Ev.clienty-disy + ' px ';
for (var i=0; i<len; i++) {
Ali[i].style.border= ' None ';
}
var NL = Nearli (obj);
if (NL) {
Nl.style.border= ' 2px solid red ';
}
}
document.onmouseup= function () {
Document.onmousemove = null;
Document.onmouseup = null;
var NL = Nearli (obj);
if (NL) {
Nl.style.border= ' 2px solid red ';
Startmove (Obj,{left:pos[nl.index][0],top:pos[nl.index][1]});
Startmove (Nl,{left:pos[obj.index][0],top:pos[obj.index][1]});
var tmp =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]});
}
}
return false;
}
}
Detect if there is a collision
function Isdump (obj1,obj2) {
var l1= obj1.offsetleft;
var r1= l1+obj1.offsetwidth;
var t1= obj1.offsettop;
var B1 =obj1.offsetheight +t1;
var l2= obj2.offsetleft;
var r2= l2+obj2.offsetwidth;
var t2= obj2.offsettop;
var B2 =obj2.offsetheight +t2;
if (b2<t1 | | l2>r1 | | r2<l1 | | t2>b1) {
return false;
}else{
return true;
}
}
Find the nearest node
function Nearli (obj) {
var index=-1;
var value = 9999;
for (var i=0; i<len; i++) {
if (Isdump (obj,ali[i]) && obj!=ali[i]) {
var c = Getdis (Obj,ali[i]);
if (c <value) {
value = C;
index = i;
}
}
}
if (index!=-1) {
return Ali[index];
}else{
return false;
}
}
function Getdis (obj1,obj2) {
var x = Obj1.offsetleft-obj2.offsetleft;
var y = obj1.offsettop-obj2.offsettop;
Return Math.sqrt (Math.pow (x,2) +math.pow (y,2));
}
}
</script>
</head>
<body>
<button id= "BTN" >click</button>
<ul>
<li><img src= "1l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "2l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "3l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "4l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "5l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "6l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "1l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "2l.jpg" width= "200px" height= "150px" ></li>
<li><img src= "4l.jpg" width= "200px" height= "150px" ></li>
</ul>
</body>
</html>
I hope this article will help you with your JavaScript programming.