效果图:

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

实现思路:

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

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

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

代码:

  1.  <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>
  2.  
  1. <script src="js/move.js"></script>   //封装的运动框架
  1. <script>
  1. //获取元素
        var lis=document.getElementsByTagName('li');
        var btn=document.getElementsByTagName('button')[0];
        var izIndex=2
  2.  
  3.     //布局转换:将浮动布局转换成固定布局
        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';
        }
  4.  
  5.     //随机按钮事件
        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
            }
        }
  6.  
  7.     //拖拽事件
        for (var i = 0; i < lis.length; i++) {
            drag(lis[i])
        }
  1. 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';
  2.  
  3.             for (var i = 0; i < lis.length; i++) {
                    lis[i].style.border=""
                }
                var nl=nearLi(obj) //如果存在离当前拖拽元素最近的元素
                if(nl){
                    nl.style.border="1px solid red"
                }
            }
  1.  
  1. //松开
    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
        }
    }
  1. /交换位置 交换仅仅是效果上的位置 属性值依然没有交换
            return false
        }
    }
    //碰撞检测
  1. function pz(obj1,obj2){
        var L1=obj1.offsetLeft;
        var R1=obj1.offsetLeft+obj1.offsetWidth;
        var T1=obj1.offsetTop;
        var B1=obj1.offsetTop+obj1.offsetHeight;
  2.  
  3.     var L2=obj2.offsetLeft;
        var R2=obj2.offsetLeft+obj2.offsetWidth;
        var T2=obj2.offsetTop;
        var B2=obj2.offsetTop+obj2.offsetHeight;
  4.  
  5.     if(R1<L2 || L1>R2 || B1<T2 || T1>B2){
            return false
        }else{
            return true
        }
  6.  
  7. }//封装的是检测两个物体是否碰上
    //Math.sqrt(4)  ---2  开平方的公式
    function ji(obj1,obj2){
  8.  
  9.     var a=obj1.offsetLeft-obj2.offsetLeft;
        var b=obj1.offsetTop-obj2.offsetTop;
  10.  
  11.     return Math.sqrt(a*a+b*b)
    }//封装一个求两点之间距离的函数
  1.  
  1.  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// 找到离当前拖拽元素最近的元素
                    }
                }
            }
  2.  
  3.         if(index!=-1){
                return lis[index]
            }else{
                return false
            }
  4.  
  5.     }
    </script>
  6.  
  7. 下载地址:https://gitee.com/goodSkz/PingShiLianXi.git
  1.  
  1.  
  1.

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

  1. JavaScript案例开发之扑克游戏

    随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...

  2. JavaScript案例一：Window弹窗案例

    注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例&l ...

  3. 面向对象原生JavaScript案例炫彩小球

    面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目 面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...

  4. 第二章 JavaScript案例（中）

    1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> < ...

  5. Ajax(javascript)案例

    一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding ...

  6. web开发：javascript案例

    一.浮动与定位复习 二.小米菜单案例 三.轮播图 四.滚动轮播 一.浮动与定位复习 - 浮动与相对定位 ```js// 1.两者均参与布局// 2.主浮动布局, 相对布局辅助完成布局微调// 3.相对 ...

  7. JavaScript案例七：简单生成表格

    JavaScript简单生成表格,巩固基础知识点... <!DOCTYPE html> <html> <head> <title>JavaScript简 ...

  8. JavaScript案例六：简单省市联动(NBA版)

    JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...

  9. JavaScript案例五：下拉列表左右选择

    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...

随机推荐

  1. mysql 的用户权限

    查看MySQL的用户权限 show grants for "username"@'host'; 添加新用户 允许本地IP访问localhost:127.0.0.1 use mysq ...

  2. UWP中String 转为Path Data

    定义方法: Geometry PathMarkupToGeometry(string pathMarkup) { string xaml = "<Path " + " ...

  3. qt中用tcp传输xml消息 good

    本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.   环境: 主机:WIN7 开发环境:Qt5 3.1.2 说明: 在tcp上传输xml消息. 协议格式如 ...

  4. Django预备知识

    http协议 url: 协议://域名(IP)+端口(80)/路径?参数(a=1&b=2) 示例:https://www.baidu.com/s/?wd=aaa MVC M:mdoel 与数据 ...

  5. 作为服务注册中心，Eureka比Zookeeper好在哪里

    CAP是Consistency.Availablity和Partition Tolerance的缩写.一般的分布式系统最多满足其中两条.而Partition Tolerance是分布式系统的关键,因此 ...

  6. DNS之主服务器正向区域部署流程

    正向区域:将域名解析为IP 搭建步骤 1)定义区域 2)编写区域解析库文件 3)添加记录 环境介绍 [root@dns ~]# cat /etc/centos-releaseCentOS releas ...

  7. Windows下OSGEarth的编译过程

    目录 1. 依赖 1) OpenSceneGraph 2) GDAL 3) CURL 4) GEOS 5) 其他 2. 编译 1) 设置参数 2) 配置路径 3) 生成编译 3. 参考文献 1. 依赖 ...

  8. http-post调用接口简单代码

    一.简单便捷的httpget调用接口,并且返回接口数据1.导入相应的jar包: 2.代码如下: HttpPost post = null; try { HttpClient httpClient = ...

  9. 寻找图的强连通分量：tarjan算法简单理解

    1.简介tarjan是一种使用深度优先遍历(DFS)来寻找有向图强连通分量的一种算法. 2.知识准备栈.有向图.强连通分量.DFS. 3.快速理解tarjan算法的运行机制提到DFS,能想到的是通过栈 ...

  10. VirtualBox基础使用

    VirtualBox基础使用 VirtualBox相对VMware来说是轻量级的虚拟软件, 最关键的是VirtualBox是开源免费的. 配置全局选项 点击管理-->全局设定, 进入设置界面. ...