Расставить абсолютные координаты картинкам

Question

Подскажите, как правильно расставить абсолютные координаты картинкам, исходя из их html-кода. У меня они расставлены буквально для каждой, если картинок будет гораздо больше, код получается нерациональный. Вот часть кода:

<body style='min-height: 100vh'>
<img src='1.png'>
<img src='2.png' width=50>
<img src='3.png' width=100>
<img src='4.png' style='padding-left: 50px'>

<script>
"use strict";
window.addEventListener('load', pos, false);

function pos(eo) {
eo = eo || window.event;
let elems = document.querySelectorAll('img');
for (var i = elems.length - 1; i >= 0; i--) {
let elem = elems[i];   

elems[0].style.left = "10px";
elems[0].style.top = "60px";

elems[1].style.left = "160px";
elems[1].style.top = "160px";

elems[2].style.left = "260px";
elems[2].style.top = "90px";

elems[3].style.left = "400px";
elems[3].style.top = "10px";
 
elem.style.position = 'absolute';       
} 
}
</script>

Благодарю всех за помощь!

Answer 1

Вам нужен массив объектов

const pos = [
  {
    "left": "10px",
    "top": "60px"
  },

  {
    "left": "160px",
    "top": "160px"
  },

  {
    "left": "260px",
    "top": "90px"
  },

  {
    "left": "400px",
    "top": "10px"
  }
]

Тогда в цикле вы можете сделать следующее:

elems[i].style.left = pos[i].left;
elems[i].style.top = pos[i].top;

БЛОГ НА HUSL

Расставить абсолютные координаты картинкам

Ответы (1 шт):