首页
所有分类
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 写类方式之四
Jul 05 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue实现扫码功能
Jan 17 Javascript
js中延迟加载和预加载的具体使用
Jan 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
电台(1) SONY(15) 天线(6) 发报机(1) PL-880(1) ICF-7600(1) 德劲(5) 电路图(1) 索尼(5) 短波(1)
You might like
最新用php获取谷歌PR值算法，附上php查询PR值代码示例
2011/12/25 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python中字符串前面加r的作用
2015/06/04 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Django model select的多种用法详解
2019/07/16 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Django文件上传与下载（FileFlid）
2019/10/06 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
澳大利亚墨水站Ink Station：墨水和碳粉打印机墨盒
2019/03/24 全球购物
药学职务聘任书
2014/03/29 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书