Este artigo descreve o método de implementar a função da parede fotográfica por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! 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 Photo Wall </ititle>
<meta http-equiv = "x-ua compatível com" content = "edge">
<meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1">
<meta name = "Palavras -chave" content = "JS Photo Wall">
<meta name = "description" content = "js parede fotográfica">
<link href = "css/style.css" rel = "Stylesheet">
<script src = "move.js"> </script>
<estilo>
*{preenchimento: 0; margem: 0;}
Li {estilo de lista: nenhum;}
ul {width: 660px; Altura: 510px; Antecedentes: #ccc; margem: 20px Auto;}
li {width: 200px; Altura: 150px; margem: 10px; flutuar: esquerda; }
</style>
<Cript>
/*
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;
// conversão de layout
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 aleatória = [0,1,2,3,4,5,6,7,8];
Randomarr.sort (função (num1, num2) {
retornar math.random ()-0,5;
})
for (var i = 0; i <len; i ++) {
// Adicionar para adicionar posições aleatórias
StartMove (Ali [i], {esquerda: POS [Randomarr [i]] [0], topo: POS [Randomarr [i]] [1]});
// Correção do índice
Ali [i] .Index = Randomarr [i];
}
}
// arraste e arraste
função 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';
for (var i = 0; i <len; i ++) {
ali [i] .style.border = 'nenhum';
}
var nl = próximo (obj);
if (nl) {
nl.style.border = '2px vermelho sólido';
}
}
document.onmouseup = function () {
document.onMousEmove = null;
document.onmouseup = null;
var nl = próximo (obj);
if (nl) {
nl.style.border = '2px vermelho sólido';
startMove (obj, {esquerda: pos [nl.index] [0], topo: pos [nl.index] [1]});
startMove (nl, {esquerda: pos [obj.index] [0], topo: pos [obj.index] [1]});
var tmp = nl.index;
nl.index = obj.index;
obj.index = tmp;
nl.style.border = '';
}outro{
startmove (obj, {esquerda: pos [obj.index] [0], topo: pos [obj.index] [1]});
}
}
retornar falso;
}
}
// Detecção de colisão
função 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) {
retornar falso;
}outro{
retornar true;
}
}
// Procure o nó mais próximo
função nearli (obj) {
var index = -1;
Valor 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 <valor) {
valor = c;
índice = i;
}
}
}
if (index! =-1) {
retornar Ali [índice];
}outro{
retornar falso;
}
}
função getdis (obj1, obj2) {
var x = obj1.OffSetLeft - obj2.OffSetLeft;
var y = obj1.offsetTop - obj2.offSettop;
retornar math.sqrt (math.pow (x, 2)+math.pow (y, 2));
}
}
</script>
</head>
<Body>
<botão id = "btn"> clique em </butut>
<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 artigo seja útil para a programação JavaScript de todos.