js实现照片墙功能实例


Posted in Javascript onFebruary 05, 2015

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

<!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照片墙</title>

        <meta http-equiv="X-UA-Compatible" content="edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="Keywords" content="js照片墙">

        <meta name="description" content="js照片墙">

        <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;

                //布局转换
                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++){

                        //增加随机位置的情况

                       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<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;

                    }

                }

                //检测是否有碰撞

                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;

                    }

                }

                //寻找最近的节点

                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>

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

Javascript 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
asm.js使用示例代码
Nov 28 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
js实现仿百度瀑布流的方法
Feb 05 #Javascript
JS函数this的用法实例分析
Feb 05 #Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 #Javascript
js关于命名空间的函数实例
Feb 05 #Javascript
js实现数字每三位加逗号的方法
Feb 05 #Javascript
javascript实现字符串反转的方法
Feb 05 #Javascript
Javascript中拼接大量字符串的方法
Feb 05 #Javascript
You might like
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JS实现左右无缝轮播图代码
2016/05/01 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python设置环境变量的原因和方法
2019/06/24 Python
Django 路由控制的实现
2019/07/17 Python
pycharm运行scrapy过程图解
2019/11/22 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
学前班教师的自我鉴定
2013/12/05 职场文书
中专生的个人自我评价
2013/12/11 职场文书
八项规定对照检查材料
2014/08/31 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
秋季运动会加油词
2015/07/18 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android