效果图:

---------------------------------------------------------------------------------------------------------------------------

实现思路:

1.布局转换,定义一个大数组，可以存放每个li的小数组(left,top)
2.点击按钮随机事件
将每个li标签添加对象下标,再进行Math.random()的sort()排序
3.拖拽事件
将当前获取的li标签进行拖拽操作,再进行碰撞检测，这里通过勾股定理判断当前li标签与其他li标签谁距离最短

进行互换位置(这里需要定义一个数据存储)

---------------------------------------------------------------------------------------------------------------------------

代码:

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ul1{
            width: 660px;
            position: relative;
            margin: 20px auto;
        }
        li {
            width: 200px;
            height: 150px;
            margin: 20px 0 0 20px;
            float: left; /*这里采用浮动布局*/
            list-style: none;
        }
        img{
            width: 100%;
            height: 100%;
        }
        button{
            position: absolute;
            top: 50px;
            left: 100px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<ul id="ul1">
    <li><img src="data:image/angelababy-001.jpg"/></li>
    <li><img src="data:image/angelababy-002.jpg"/></li>
    <li><img src="data:image/angelababy-003.jpg"/></li>
    <li><img src="data:image/angelababy-004.jpg"/></li>
    <li><img src="data:image/angelababy-005.jpg"/></li>
    <li><img src="data:image/angelababy-006.jpg"/></li>
    <li><img src="data:image/angelababy-007.jpg"/></li>
    <li><img src="data:image/angelababy-008.jpg"/></li>
    <li><img src="data:image/angelababy-009.jpg"/></li>
</ul>
<button>随机打乱</button>


<script src="js/move.js"></script>   //封装的运动框架
<script>
//获取元素
    var lis=document.getElementsByTagName('li');
    var btn=document.getElementsByTagName('button')[0];
    var izIndex=2

    //布局转换:将浮动布局转换成固定布局
    var arr=[];
    for(var i=0;i<lis.length;i++){
        lis[i].index=i
        arr.push( [lis[i].offsetLeft,lis[i].offsetTop] );//存储每个li标签的位置
    }
    for (var i = 0; i < lis.length; i++){
        lis[i].style.position='absolute';
        lis[i].style.left=arr[i][0]+'px';
        lis[i].style.top=arr[i][1]+'px';
    }

    //随机按钮事件
    btn.onclick=function () {
        var arr1=[0,1,2,3,4,5,6,7,8];
        arr1.sort(function(){
            return Math.random()-0.5
        });
        for (var i = 0; i < lis.length; i++) {
            startMove(lis[i],{left:arr[arr1[i]][0],top:arr[arr1[i]][1]})
            lis[i].index=i
        }
    }

    //拖拽事件
    for (var i = 0; i < lis.length; i++) {
        drag(lis[i])
    }
function drag(obj){
    var disx=0;
    var disy=0;
    obj.onmousedown=function(ev){
        var e=ev || event;
        obj.style.zIndex=izIndex++;
        disx=e.clientX-obj.offsetLeft;
        disy=e.clientY-obj.offsetTop;
        document.onmousemove=function(ev){
            var e=ev || event;
            obj.style.left=e.clientX-disx+'px';
            obj.style.top=e.clientY-disy+'px';

            for (var i = 0; i < lis.length; i++) {
                lis[i].style.border=""
            }
            var nl=nearLi(obj) //如果存在离当前拖拽元素最近的元素
            if(nl){
                nl.style.border="1px solid red"
            }
        }


//松开
document.onmouseup=function(){
    document.onmousemove=null;
    document.onmouseup=null;
    var nl=nearLi(obj);
    var tmp=0
    if(nl){
        startMove(nl,{left:arr[obj.index][0],top:arr[obj.index][1]})
        startMove(obj,{left:arr[nl.index][0],top:arr[nl.index][1]})
        nl.style.border=""
        tmp=obj.index;
        obj.index=nl.index;
        nl.index=tmp
    }
}


/交换位置 交换仅仅是效果上的位置 属性值依然没有交换
        return false
    }
}
//碰撞检测


function pz(obj1,obj2){
    var L1=obj1.offsetLeft;
    var R1=obj1.offsetLeft+obj1.offsetWidth;
    var T1=obj1.offsetTop;
    var B1=obj1.offsetTop+obj1.offsetHeight;

    var L2=obj2.offsetLeft;
    var R2=obj2.offsetLeft+obj2.offsetWidth;
    var T2=obj2.offsetTop;
    var B2=obj2.offsetTop+obj2.offsetHeight;

    if(R1<L2 || L1>R2 || B1<T2 || T1>B2){
        return false
    }else{
        return true
    }

}//封装的是检测两个物体是否碰上
//Math.sqrt(4)  ---2  开平方的公式
function ji(obj1,obj2){

    var a=obj1.offsetLeft-obj2.offsetLeft;
    var b=obj1.offsetTop-obj2.offsetTop;

    return Math.sqrt(a*a+b*b)
}//封装一个求两点之间距离的函数




 function nearLi(obj){
        var value=Infinity; //设置了一个无限大值
        var index=-1
        for (var i = 0; i < lis.length; i++) {
            if(pz(obj,lis[i]) && obj!=lis[i]){
                var c=ji(obj,lis[i]);
                if(c<value){
                    value=c; //value就是离当前拖拽元素最近的距离
                    index=i// 找到离当前拖拽元素最近的元素
                }
            }
        }

        if(index!=-1){
            return lis[index]
        }else{
            return false
        }

    }
</script>

下载地址:https://gitee.com/goodSkz/PingShiLianXi.git


 


 


   
												


											
javascript案例之照片墙的更多相关文章
	

    
								
  1. JavaScript案例开发之扑克游戏
		
    随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...
    
		
    2. 
						
  2. JavaScript案例一：Window弹窗案例
		
    注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例&l ...
    
		
    3. 
						
  3. 面向对象原生JavaScript案例炫彩小球
		
    面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目 面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...
    
		
    4. 
						
  4. 第二章 JavaScript案例（中）
		
    1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> < ...
    
		
    5. 
						
  5. Ajax(javascript)案例
		
    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...
    
		
    6. 
						
  6. web开发：javascript案例
		
    一.浮动与定位复习 二.小米菜单案例 三.轮播图 四.滚动轮播 一.浮动与定位复习 - 浮动与相对定位 ```js// 1.两者均参与布局// 2.主浮动布局, 相对布局辅助完成布局微调// 3.相对 ...
    
		
    7. 
						
  7. JavaScript案例七：简单生成表格
		
    JavaScript简单生成表格,巩固基础知识点... <!DOCTYPE html> <html> <head> <title>JavaScript简 ...
    
		
    8. 
						
  8. JavaScript案例六：简单省市联动(NBA版)
		
    JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...
    
		
    9. 
						
  9. JavaScript案例五：下拉列表左右选择
		
    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 使用Newtonsoft.Json输出JSON
			
    安装: Install-Package Newtonsoft.Json 代码: //序列化DataTable DataTable dt = new DataTable(); dt.Columns.Ad ...
    
			
    2. 
						
  2. 逻辑回归模型（Logistic Regression）及Python实现
			
    逻辑回归模型(Logistic Regression)及Python实现 http://www.cnblogs.com/sumai 1.模型 在分类问题中,比如判断邮件是否为垃圾邮件,判断肿瘤是否为阳 ...
    
			
    3. 
						
  3. hdu4767_Bell_矩阵快速幂+中国剩余定理
			
    2013长春赛区网络赛的1009题 比赛的时候这道题英勇的挂掉了,原因是写错了一个系数,有时候粗心比脑残更可怕 本题是关于Bell数,关于Bell数的详情请见维基:http://en.wikipedi ...
    
			
    4. 
						
  4. sql  日志恢复
			
    可能有不少朋友遇到过这样的问题: update或delete语句忘带了where子句,或where子句精度不够,执行之后造成了严重的后果,这种情况的数据恢复只能利用事务日志的备份来进行,所以如果你的S ...
    
			
    5. 
						
  5. CMD 从文件中截取匹配规则字符串并输出到文件
			
    *******************command**********************git diff 8d71d92b2d957fd1b697b4cf785fb984f190e5d2 or ...
    
			
    6. 
						
  6. 深入理解Java的浅克隆与深克隆
			
    前言 克隆,即复制一个对象,该对象的属性与被复制的对象一致,如果不使用Object类中的clone方法实现克隆,可以自己new出一个对象,并对相应的属性进行数据,这样也能实现克隆的目的. 但当对象属性 ...
    
			
    7. 
						
  7. C++标准库（体系结构与内核分析）（侯捷第二讲）
			
    一.OOP和GP的区别(video7) OOP:面向对象编程(Object-Oriented programming) GP:泛化编程(Generic programming) 对于OOP来说,我们要 ...
    
			
    8. 
						
  8. 老雷socket编程之认识常用协议
			
    老雷socket编程之常见网络协议 1.ip IP协议是将多个包交换网络连接起来,它在源地址和目的地址之间传送一种称之为数据包的东西, 它还提供对数据大小的重新组装功能,以适应不同网络对包大小的要求. ...
    
			
    9. 
						
  9. Mac下安装redis5.0 与命令
			
    参考链接:https://blog.csdn.net/zyp1376308302/article/details/84257606 参开链接2:https://www.cnblogs.com/guan ...
    
			
    10. 
						
  10. UVALive 6255：Kingdoms（状压DFS）
			
    题目链接 题意 给出n个王国和n*n的矩阵,mp[i][j] 代表第 i 个王国欠第 j 个王国 mp[i][j] 块钱.如果当前的王国处于负债状态,那么这个王国就会被消除,和它相连的王国的债务都会被 ...
    
			
    11.