Я разработал следующий блок кода с использованием HTML и Javascript, который является полностью функциональным:
<html>
<body>
<img id="img0" style="position:fixed; width:116px; height:100px;" >
<img id="img1" style="position:fixed; width:116px; height:100px;" >
<img id="img2" style="position:fixed; width:116px; height:100px;" >
<img id="img3" style="position:fixed; width:116px; height:100px;" >
<script>
let rightArray = [300, 213, 387, 300 ];
let bottomArray = [300, 350, 350, 200];
let imageArray = ['image1.png', 'image2.png', 'image3.png', 'image4.png'];
const img0 = document.querySelector('#img0');
img0.style.right = rightArray[0] + "px";
img0.style.bottom = bottomArray[0] + "px";
img0.src = imageArray[0];
const img1 = document.querySelector('#img1');
img1.style.right = rightArray[1] + "px";
img1.style.bottom = bottomArray[1] + "px";
img1.src = imageArray[1];
const img2 = document.querySelector('#img2');
img2.style.right = rightArray[2] + "px";
img2.style.bottom = bottomArray[2] + "px";
img2.src = imageArray[2];
const img3 = document.querySelector('#img3');
img3.style.right = rightArray[3] + "px";
img3.style.bottom = bottomArray[3] + "px";
img3.src = imageArray[3];
</script>
</body>
</html>
В основном он организует некоторые гексагональные изображения в следующем шаблоне: 
Как мы видим в коде, все очень повторяется, и было бы удобнее сделать этот код внутри цикла.Но для этого мне нужен способ поместить img tag в цикл.Псевдокод того, что я хочу сделать, выглядит примерно так:
<html>
<body>
for(let i=0; i<4; i++)
{
<img id="img[i]" style="position:fixed; width:116px; height:100px;" >
}
<script>
let rightArray = [300, 213, 387, 300 ];
let bottomArray = [300, 350, 350, 200];
let imageArray = ['image1.png', 'image2.png', 'image3.png', 'image4.png'];
let objectNameArray = ['img0', 'img1', 'img2', 'img3'];
for(let i=0; i<4; i++)
{
const objectNameArray[i] = document.querySelector('#' + objectNameArray[i]);
objectNameArray[i].style.right = rightArray[i] + "px";
objectNameArray[i].style.bottom = bottomArray[i] + "px";
objectNameArray[i].src = imageArray[i];
}
</script>
</body>
</html>
Я на 100% уверен, что этот последний код не работает, первый цикл полностью неверен, а второй мы можемне объявляйте и не используйте объекты так, как я это делал.Итак, в основном У меня есть два сомнения:
- Можно ли поместить тег img в цикл, чтобы мне не нужно было его много копировать?время, когда я обрабатываю его параметры с помощью Javascript?
- Можно ли объявлять и использовать различные объекты, созданные с помощью циклических взаимодействий?
Эти вопросы возникли у меня в голове только потому, что я хотел оптимизировать первый блок кода, который я разместил здесь ... Я не уверен, что то, что я хочу сделать, возможно или я пытаюсь сделатьэто правильно.Так что я открыт для разных точек зрения, чтобы делать одно и то же разными способами.Спасибо !!