首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

js实现照片墙功能实例

- Author -

magicfly9527

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
js中的this关键字详解
Sep 25 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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
ETON(1) 沃尔沃(1) E1-XM(1) VOLVO(1) MOTOROLA(1) 66-XI(1) S900(1) 摩托罗拉(1) 军机(1) 77A(2)
You might like
php基础知识:函数基础知识
2006/12/13 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
twig模板常用语句实例小结
2016/02/04 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
JavaScript简单实现弹出拖拽窗口（二）
2016/06/17 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python文件比较示例分享
2014/01/10 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python获取代理IP的实例分享
2018/05/07 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python实现udp聊天窗口
2020/03/31 Python
专科毕业生求职简历的自我评价
2013/10/12 职场文书
大学生学习自我评价
2014/01/13 职场文书
同学聚会主持词
2014/03/18 职场文书
天猫活动策划方案
2014/08/21 职场文书
干部对照检查材料范文
2014/08/26 职场文书
银行员工考核评语
2014/12/31 职场文书
Redis性能监控的实现
2021/07/09 Redis