Как можно рандомно вставить картинки в разные места на javascript?

Пользователь

от karen.wisozk , в категории: JavaScript , 6 месяцев назад

Как можно рандомно вставить картинки в разные места на javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от evalyn.barrows , 6 месяцев назад

@karen.wisozk 

Вы можете использовать JavaScript для рандомного вставления картинок в разные места на странице HTML. Ниже приведен пример кода, который поможет вам выполнить задачу:


HTML:

1
2
3
4
5
6
7
8
9
    Рандомное вставление картинок
    


    

    



CSS (файл style.css):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#container {
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}


JavaScript (файл script.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
window.addEventListener('load', function() {
    var container = document.getElementById('container');
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']; // список ваших картинок

    for (var i = 0; i < 10; i++) { // количество размещаемых картинок
        var img = document.createElement('img');
        var randomImage = images[Math.floor(Math.random() * images.length)]; // случайная картинка из списка
        img.src = randomImage;
        
        var randomPositionX = Math.floor(Math.random() * (window.innerWidth - 150)); // случайное положение по оси X
        var randomPositionY = Math.floor(Math.random() * (window.innerHeight - 150)); // случайное положение по оси Y
        img.style.left = randomPositionX + 'px';
        img.style.top = randomPositionY + 'px';
        
        container.appendChild(img);
    }
});


В этом примере мы добавляем слушатель события load для ожидания загрузки страницы. Затем создаем элемент img для каждой рандомной картинки из списка images. Мы также генерируем случайные значения для позиции по осям X и Y и задаем соответствующие стили для каждой картинки.


Надеюсь, это поможет вам решить вашу задачу!