0

Подскажите, как правильно расставить абсолютные координаты картинкам, исходя из их 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>

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

5
  • По какой логике расставить да и вообще зачем?
    – andreymal
    Commented 8 февр. в 16:17
  • допустим, будет много картинок, нужно придумать алгоритм(модель) для установки соответствующих координат картинкам (они все абсолютно спозиционированы)
    – Ann
    Commented 8 февр. в 16:27
  • Ты создаёшь свою галерею Masonry а-ля miromannino.github.io/Justified-Gallery / masonry.desandro.com? Commented 8 февр. в 17:22
  • Что тут думать... Прописать каждой картинке аттрибуты data-x="..." data-y="...". Расставлять в цикле. А ежели какие-то хитрые условия, то нужно сначала эти условия объяснить в вопросе.
    – NoSkill
    Commented 8 февр. в 17:29
  • Картинки должны располагаться на одной линии по горизонтали друг за другом в том же порядке.
    – Ann
    Commented 8 февр. в 18:50

1 ответ 1

0

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

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;
1
  • как вариант, спасибо
    – Ann
    Commented 9 февр. в 12:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.