js实现照片墙功能实例_javascript技巧

 本文实例讲述了js实现照片墙功能的方法。分享给大家供大家参考。具体实现方法如下：
代码如下:












/*
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;
//布局转换

for(var i=0;i pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
}
for(var i=0;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 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 //增加随机位置的情况
startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});
//修正索引
aLi[i].index = randomArr[i];
}
}
//拖拽
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 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;
}
}
//检测是否有碰撞
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(b2r1 || r2b1){
return false;
}else{
return true;
}
}
//寻找最近的节点
function nearLi(obj){
var index= -1;
var value =9999;
for(var i=0; i if(isDump(obj,aLi[i]) && obj !=aLi[i]){
var c = getDis(obj,aLi[i]);
if(c 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));
}
}



click

希望本文所述对大家的javascript程序设计有所帮助。