この記事では、JSによる写真壁の機能を実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<！doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns：html5 = "http://www.w3.org/1999/xhtml">
<head>
<メタ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フォトウォール">
<メタ名= "説明" content = "jsフォトウォール">
<link href = "css/style.css" rel = "styleSheet">
<スクリプトsrc = "move.js"> </script>
<style>
*{パディング：0;マージン：0;}
li {list-style：none;}
ul {width：660px;高さ：510px;背景：#ccc;マージン：20px auto;}
li {width：200px;高さ：150px;マージン：10px;フロート：左; }
</style>
<スクリプト>
/*
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 <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];
}
}
//ドラッグしてドラッグします
関数setDrag（obj）{
obj.onmousedown = function（ev）{
izindex ++;
obj.style.zindex = izindex;
var ev = ev ||イベント;
var disx = ev.clientx -obj.offsetLeft;
var disy = ev.clienty -obj.offsettop;
document.onmousemove = function（ev）{
var ev = ev ||イベント;
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、{左：pos [nl.index] [0]、top：pos [nl.index] [1]}）;
startmove（nl、{左：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.offseetheight +t1;
var l2 = obj2.offsetLeft;
var r2 = l2+obj2.offsetwidth;
var t2 = obj2.offsettop;
var b2 = obj2.offseetheight +t2;
if（b2 <t1 || l2> r1 || r2 <l1 || t2> b1）{
falseを返します。
}それ以外{
trueを返します。
}
}
//最寄りのノードを探します
function nearli（obj）{
var index = -1;
var値= 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）{
値= c;
index = i;
}
}
}
if（index！= -1）{
return ali [index];
}それ以外{
falseを返します。
}
}
関数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>
<ボタンID = "btn"> </button>をクリックします
<ul>
<li> <img src = "1l.jpg"> </li>
<li> <img src = "2l.jpg"> </li>
<li> <img src = "3l.jpg"> </li>
<li> <img src = "4l.jpg"> </li>
<li> <img src = "5l.jpg"> </li>
<li> <img src = "6l.jpg"> </li>
<li> <img src = "1l.jpg"> </li>
<li> <img src = "2l.jpg"> </li>
<li> <img src = "4l.jpg"> </li>
</ul>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。