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

Question

[Кирилл Вегеле]

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

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

Comments

[Вадим]

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

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

[Алексей 〒.]

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

Answer 1

[Григорий Боев]

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

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

Comments

[Кирилл Вегеле]

то есть вместо _ поставить массив из 4 картинок?

[Григорий Боев]

Кирилл, нет, доделать пункты:
"взять первые 4, расположить картинки по блокам с соответствующими номерами."
Не знаю как разметка устроена, поэтому не подскажу. Но по сути - перебрать массив картинок, каждую расположить на месте, которое соответствует числу в массиве.

[Ankhena]

Возможно, удобнее брать сразу буквы, а не числа.
Из них же построить именованную сетку грида.
Полученные буквы записывать в кастомные свойства css.

Answer 2

[Sergey]

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

isotope
Shuffle
masonry
packery