Este artículo describe el método para implementar la función de la pared de fotos por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! DocType Html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/1999/xhtml ">
<Evista>
<meta charset = "utf-8">
<title> JS Photo Wall </title>
<meta http-oquiv = "x-ua-compatible" content = "borde">
<Meta name = "Viewport" Content = "Width = Device-width, inicial a escala = 1">
<meta name = "Keywords" Content = "JS Photo Wall">
<meta name = "Descripción" Content = "JS Photo Wall">
<link href = "css/style.css" rel = "stylesheet">
<script src = "Move.js"> </script>
<estilo>
*{relleno: 0; margen: 0;}
li {list-style: none;}
ul {ancho: 660px; Altura: 510px; Antecedentes: #ccc; margen: 20px Auto;}
li {ancho: 200px; Altura: 150px; margen: 10px; flotante: izquierda; }
</style>
<script>
/*
var arr = ['a', 'b', 'c', 'd', 'e', 'd', 'f'];
var pos = arr.lastindexof ('d');
alerta (pos);
*/
window.onload = function () {
var ali = document.QuerySelectorAll ('li');
var oinput = document.Queryselector ('#btn');
var pos = [];
var len = ali.length;
var izindex = 2;
// Conversión de diseño
para (var i = 0; i <len; i ++) {
pos.push ([ali [i] .OffsetLeft, Ali [i] .Offsettop]);
}
para (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';
}
para (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;
})
para (var i = 0; i <len; i ++) {
// Agregar para agregar posiciones aleatorias
startmove (ali [i], {izquierda: pos [randomarr [i]] [0], arriba: pos [randomarr [i]] [1]});
// Corrección del índice
Ali [i] .index = randomarr [i];
}
}
// arrastre y arrastre
función setdrag (obj) {
obj.onmousedown = function (ev) {
izindex ++;
obj.style.zindex = izindex;
var eV = eV || evento;
var disx = ev.clientx - obj.offsetleft;
var disy = ev.clienty - obj.offsettop;
document.onmouseMove = function (ev) {
var eV = eV || evento;
obj.style.left = ev.clientx- disx +'px';
obj.style.top = ev.clienty - disy +'px';
para (var i = 0; i <len; i ++) {
Ali [i] .style.border = 'Ninguno';
}
var nl = cercano (obj);
if (nl) {
nl.style.border = '2px sólido rojo';
}
}
document.onmouseUp = function () {
document.onmouseMove = null;
document.onmouseUp = null;
var nl = cercano (obj);
if (nl) {
nl.style.border = '2px sólido rojo';
startmove (obj, {izquierda: pos [nl.index] [0], arriba: pos [nl.index] [1]});
startmove (nl, {izquierda: pos [obj.index] [0], arriba: pos [obj.index] [1]});
var tmp = nl.index;
nl.index = obj.index;
obj.index = tmp;
nl.style.border = '';
}demás{
startmove (obj, {izquierda: pos [obj.index] [0], arriba: pos [obj.index] [1]});
}
}
devolver falso;
}
}
// Detección de colisión
función 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) {
devolver falso;
}demás{
devolver verdadero;
}
}
// busca el nodo más cercano
función cercana (obj) {
Var index = -1;
valor var = 9999;
para (var i = 0; i <len; i ++) {
if (isDump (obj, ali [i]) && obj! = ali [i]) {
var c = getDis (obj, ali [i]);
if (c <valor) {
valor = c;
índice = i;
}
}
}
if (index! =-1) {
return ali [índice];
}demás{
devolver falso;
}
}
función 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>
</ablo>
<Body>
<botón id = "btn"> haga clic en </botón>
<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>
Espero que este artículo sea útil para la programación de JavaScript de todos.