フォトウォール機能のjs実装例_javascriptスキル

この記事の例では、JS でフォ​​ト ウォール機能を実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

    <頭>
       
       
       
       
       
       
       
       
        <スタイル>
            *{パディング: 0;マージン: 0;}
            li{リストスタイル: なし;}
            ul{幅: 660px;高さ:510ピクセル;背景:#ccc;マージン: 20px 自動;}
            リ{幅:200ピクセル;高さ: 150ピクセル;マージン: 10px;フロート: 左; }
       
        <スクリプト>
        /*
            var arr=['a','b','c','d','e','d','f'];
            var pos = arr.lastIndexOf('d');
            アラート(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                     pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
                }
                for(var i=0;i                     aLi[i].style.left=pos[i][0] 'px';
                    aLi[i].style.top=pos[i][1] 'px';
                    aLi[i].style.position = '絶対';
                    aLi[i].style.margin = '0px';
                }
                for(var i=0;i                      aLi[i].index = i;
                     setDrag(aLi[i]);
                }
                oInput.onclick=function(){
                    varrandomArr = [0,1,2,3,4,5,6,7,8];
                    randomArr.sort(function(num1,num2){
                        return Math.random()-0.5;
                    })
                    for(var i=0;i                         //机の位置に応じた情報を追加
                       startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});
                       //修正インデックス
                       aLi[i].index = ランダムArr[i];
                    }
                }
                //拖拽
                関数 setDrag(obj){
                    obj.onmousedown =function(ev){
                        izIndex ;
                        obj.style.zIndex= izIndex;
                        変数 ev = ev ||イベント;
                        var disX = ev.clientX - obj.offsetLeft;
                        var disY = ev.clientY - obj.offsetTop;
                        document.onmousemove=function(ev){
                            変数 ev = ev ||イベント;
                            obj.style.left = ev.clientX- disX 'px';
                            obj.style.top = ev.clientY - disY 'px';
                            for(var i=0; i                                 aLi[i].style.border='none';
                            }
                            var nL = NearLi(obj);
                            if(nL){
                                nL.style.border='2px 赤一色';
                            }
                        }
                        document.onmouseup= function(){
                            document.onmousemove = null;
                            document.onmouseup = null;
                            var nL = NearLi(obj);
                            if(nL){
                                nL.style.border='2px 赤一色';
                                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='';
                            }その他{
StartMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});
                                                                                     } falseを返します。 }
}
//衝突があるかどうかを検出します
関数 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(b2r1 || r2b1){
falseを返します。 }else{
true を返します;
}
}
//最も近いノードを検索
関数nearLi(obj){
varindex= -1;
var value =9999;
for(var i=0; i If(isDump(obj,aLi[i]) && obj !=aLi[i]){
var c = getDis(obj,aLi[i]);
If(c 値 = c; インデックス = i;
} }                                                                                                                                                                              If(インデックス !=-1){
aLi[インデックス];
を返します }else{
falseを返します。 }
}
function getDis(obj1,obj2){
var x = obj1.offsetLeft - obj2.offsetLeft;
var y = obj1.offsetTop - obj2.offsetTop;
戻り Math.sqrt(Math.pow(x,2) Math.pow(y,2));
                }
            }
       
   
   
    クリック
       

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

           
• 

       

     

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。