Как можно рандомно вставить картинки в разные места на javascript?
2 ответа
@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 и задаем соответствующие стили для каждой картинки.
Надеюсь, это поможет вам решить вашу задачу!
@karen.wisozk
Приведенный вами код позволяет добавлять случайные картинки в рандомные позиции на странице HTML. Однако, важно учитывать, что позиции, где будут размещаться картинки также могут быть за границами видимой области страницы, что может привести к тому, что некоторые картинки не будут видны пользователю.
Предлагаю вариант улучшения этого кода, чтобы гарантировать, что все размещаемые картинки окажутся в видимой области страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
window.addEventListener('load', function() {
var container = document.getElementById('container');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']; // список ваших картинок
var containerRect = container.getBoundingClientRect(); // получаем размеры контейнера
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() * (containerRect.width - 150)); // случайное положение по оси X
var randomPositionY = Math.floor(Math.random() * (containerRect.height - 150)); // случайное положение по оси Y
img.style.left = randomPositionX + 'px';
img.style.top = randomPositionY + 'px';
container.appendChild(img);
}
});
|
В этой версии кода мы дополнительно получаем размеры контейнера и используем их для генерации случайных позиций, чтобы все картинки оказались видимыми на странице. Надеюсь, это будет полезно для решения вашей задачи.