Как случайно расположить картинки?

1 ответ

У меня есть условные 9 блоков(3 на ряд) и всего 4 картинки, хочется их расположить в случайном порядке. Подскажите пожалуйста, как это сделать.

как пример: https://sredatv.ru/

Дополнительно:

И ваш код..?
И ваши мысли...?

А так, если на гридах, то, для удобства чтенияразработки сделать сетку 3 на 3, задать именованные области через grid-area, а потом обойти картинки и назначить им эти зоны через Math.random, не забыв исключать уже назначенную.

Размечаешь сетку, рандомом выбираешь позицию и добавляешь

Ответы:

Получить массив из чисел от 1 до 9, перемешать, взять первые 4, расположить картинки по блокам с соответствующими номерами.

const blocksCount = 9; let shuffledArray = new Array(blocksCount).fill().map((_,i)=&gt;i+1).sort(_=&gt;Math.random()-0.5);

const blocksCount = 9; let shuffledArray = new Array(blocksCount).fill().map((_,i)=>i+1).sort(_=>Math.random()-0.5);

то есть вместо _ поставить массив из 4 картинок?
Кирилл, нет, доделать пункты:
"взять первые 4, расположить картинки по блокам с соответствующими номерами."
Не знаю как разметка устроена, поэтому не подскажу. Но по сути - перебрать массив картинок, каждую расположить на месте, которое соответствует числу в массиве.
Возможно, удобнее брать сразу буквы, а не числа.
Из них же построить именованную сетку грида.
Полученные буквы записывать в кастомные свойства css.

sredatv они вроде как используют Isotope. Библиотеки Isotope, Masonry, Shuffle или Packery. Эти библиотеки они предоставляют инструменты для создания динамических макетов сеток на веб-страницах.

isotope
Shuffle
masonry
packery

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Роман IT Ответ

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

Сначала вам нужно создать HTML разметку для ваших картинок. Для примера, я создам контейнер с классом "image-container", в котором будут находиться картинки:

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

Затем добавим CSS стили для контейнера и картинок:

.image-container {
  display: flex;
  flex-wrap: wrap;
}
 
.image-container img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 10px;
}

.image-container { display: flex; flex-wrap: wrap; } .image-container img { width: 200px; height: 200px; object-fit: cover; margin: 10px; }

Теперь добавим JavaScript код, который будет случайным образом распределять картинки по контейнеру:

document.addEventListener("DOMContentLoaded", function() {
  const container = document.querySelector(".image-container");
  const images = Array.from(container.querySelectorAll("img"));
 
  images.sort(() =&gt; Math.random() - 0.5);
 
  images.forEach(img =&gt; {
    container.appendChild(img);
  });
});

document.addEventListener("DOMContentLoaded", function() { const container = document.querySelector(".image-container"); const images = Array.from(container.querySelectorAll("img")); images.sort(() => Math.random() - 0.5); images.forEach(img => { container.appendChild(img); }); });

Этот код будет случайным образом перемешивать картинки в контейнере при загрузке страницы. Вы можете настроить размеры и стили картинок, а также добавить больше изображений по вашему усмотрению.

Надеюсь, это поможет вам решить вашу проблему с расположением картинок на веб-странице!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Как случайно расположить картинки?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно