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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
js实现随机点名小功能
Aug 17 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
Vue自定义多选组件使用详解
Sep 08 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生成随机密码的几种方法
2011/01/17 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php-fpm配置详解
2014/02/12 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP实现简单登录界面
2019/10/23 PHP
超级退弹代码
2008/07/07 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
vue-axios使用详解
2017/05/10 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
numpy排序与集合运算用法示例
2017/12/15 Python
快速了解python leveldb
2018/01/18 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
jupyter notebook清除输出方式
2020/04/10 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
领导的自我鉴定
2013/12/28 职场文书
写给老师的表扬信
2014/01/21 职场文书
教育学习自我评价
2014/02/03 职场文书
中秋节主持词
2014/04/02 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
go原生库的中bytes.Buffer用法
2021/04/25 Golang