杰晶网络

js实现照片墙功能实例
网络编程 2024/11/16 佚名
3 2

本文实例讲述了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="/UploadFiles/2021-04-02/move.js">         <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="/UploadFiles/2021-04-02/1l.jpg">             <li><img src="2l.jpg">             <li><img src="3l.jpg">             <li><img src="4l.jpg">             <li><img src="5l.jpg">             <li><img src="6l.jpg">             <li><img src="1l.jpg">             <li><img src="2l.jpg">             <li><img src="4l.jpg">         </ul>
    </body> 
</html>

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

标签：
js,照片墙,功能
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“js实现照片墙功能实例”
暂无“js实现照片墙功能实例”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网