В этой статье описывается метод реализации функции фотостены JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/1999/xhtml">
<голова>
<meta charset = "utf-8">
<название> JS Photo Wall </title>
<meta http-equiv = "x-ua-совместимый" content = "edge">
<meta name = "viewport" content = "width = width устройства, начальная масштаба = 1">
<meta name = "Keywords" content = "JS Photo Wall">
<meta name = "description" content = "JS Photo Wall">
<link href = "css/style.css" rel = "stylesheet">
<script src = "move.js"> </script>
<style>
*{Padding: 0; поля: 0;}
li {list-style: none;}
ul {ширина: 660px; Высота: 510px; Фон: #CCC; Маржа: 20PX Auto;}
li {ширина: 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;
// преобразование макета
для (var i = 0; i <len; i ++) {
pos.push ([ali [i] .offsetleft, ali [i] .offsettop]);
}
для (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';
}
для (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) {
вернуть Math.random ()-0,5;
})
для (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';
для (var i = 0; i <len; i ++) {
ali [i] .style.border = 'none';
}
var nl = glosli (obj);
if (nl) {
nl.style.border = '2px твердый красный';
}
}
document.onmouseup = function () {
document.onmouseMove = null;
document.onmouseup = null;
var nl = glosli (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]});
}
}
вернуть ложь;
}
}
// обнаружение столкновения
Функция 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) {
вернуть ложь;
}еще{
вернуть истину;
}
}
// ищите ближайший узел
Функция рядом с (obj) {
var index = -1;
var value = 9999;
для (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) {
вернуть Али [индекс];
}еще{
вернуть ложь;
}
}
функция 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>
<тело>
<button 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.