JavaScript перемешивает элементы, но отслеживает исходный индекс или использует модуль для вставки их в родительскую раз ⇐ Html

[Anonymous]

У м е н я е с т ь с л е д у ю щ а я р а з м е т к а : < / p > < b r / > < p r e c l a s s = " l a n g - h t m l P r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; d i v c l a s s = & q u o t ; & q u o t ; & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ g a l l e r y & q u o t ; & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ r o w c o l u m n s - 1 & q u o t ; & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ c o l & q u o t ; & g t ; < b r / > & l t ; f i g u r e c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ i t e m & q u o t ; & g t ; < b r / > & l t ; a h r e f = & q u o t ; h t t p s : / / e x a m p l e . c o m / 2 0 2 4 / 1 2 / 1 1 / o u r - t e a m / o u r - t e a m - d a n / & q u o t ; & g t ; < b r / > & l t ; i m g < b r / > s r c s e t = & q u o t ; h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - d a n - 1 0 2 4 x 1 0 2 4 . j p e g ? r e s i z e = 6 0 0 % 2 C 6 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 6 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - d a n - 1 0 2 4 x 1 0 2 4 . j p e g ? r e s i z e = 9 0 0 % 2 C 9 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 9 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - d a n - 1 0 2 4 x 1 0 2 4 . j p e g ? r e s i z e = 1 2 0 0 % 2 C 1 2 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 1 2 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - d a n - 1 0 2 4 x 1 0 2 4 . j p e g ? r e s i z e = 1 5 0 0 % 2 C 1 5 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 1 5 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - d a n - 1 0 2 4 x 1 0 2 4 . j p e g ? r e s i z e = 1 8 0 0 % 2 C 1 8 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 1 8 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - d a n - 1 0 2 4 x 1 0 2 4 . j p e g ? r e s i z e = 2 0 0 0 % 2 C 2 0 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 2 0 0 0 w & q u o t ; < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / f i g u r e & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ r o w c o l u m n s - 2 & q u o t ; & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ c o l & q u o t ; & g t ; < b r / > & l t ; f i g u r e c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ i t e m & q u o t ; & g t ; < b r / > & l t ; a h r e f = & q u o t ; h t t p s : / / e x a m p l e . c o m / 2 0 2 4 / 1 2 / 1 1 / o u r - t e a m / o u r - t e a m - j e s s i c a / & q u o t ; & g t ; < b r / > & l t ; i m g < b r / > s r c s e t = & q u o t ; h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - j e s s i c a - 1 0 2 4 x 1 0 2 4 . j p g ? r e s i z e = 6 0 0 % 2 C 6 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 6 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - j e s s i c a - 1 0 2 4 x 1 0 2 4 . j p g ? r e s i z e = 9 0 0 % 2 C 9 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 9 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / o u r - t e a m - j e s s i c a - 1 0 2 4 x 1 0 2 4 . j p g ? r e s i z e = 1 1 3 2 % 2 C 1 1 3 2 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 1 1 3 2 w & q u o t ; < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / f i g u r e & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ c o l & q u o t ; & g t ; < b r / > & l t ; f i g u r e c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ i t e m & q u o t ; & g t ; < b r / > & l t ; a h r e f = & q u o t ; h t t p s : / / e x a m p l e . c o m / 2 0 2 4 / 1 2 / 1 1 / o u r - t e a m / r e b e c c a - 2 / & q u o t ; & g t ; < b r / > & l t ; i m g < b r / > s r c s e t = & q u o t ; h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / R e b e c c a - 1 - 1 0 2 4 x 1 0 2 4 . j p g ? r e s i z e = 6 0 0 % 2 C 6 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 6 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / R e b e c c a - 1 - 1 0 2 4 x 1 0 2 4 . j p g ? r e s i z e = 9 0 0 % 2 C 9 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 9 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / R e b e c c a - 1 - 1 0 2 4 x 1 0 2 4 . j p g ? r e s i z e = 1 2 0 0 % 2 C 1 2 0 0 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 1 2 0 0 w , h t t p s : / / e x a m p l e . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 4 / 1 2 / R e b e c c a - 1 - 1 0 2 4 x 1 0 2 4 . j p g ? r e s i z e = 1 3 3 3 % 2 C 1 3 3 3 & a m p ; a m p ; s t r i p = i n f o & a m p ; a m p ; s s l = 1 1 3 3 3 w & q u o t ; < b r / > / & g t ; < b r / > & l t ; / a & g t ; < b r / > & l t ; / f i g u r e & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t i l e d - g a l l e r y _ _ r o w c o l u m n s - 2 & q u o t ; >
































Я хочу иметь возможность перетасовывать каждый элемент: в случайную позицию, однако проблема заключается в том, что у первого элемента есть родительский контейнер, который определяет 1 столбец столбца-1, хотя большая часть разметки использует 2 столбца класса макета столбца-2.
Я написал базовое перетасовывание, используя этот JavaScript:

Код: Выделить всё

const shuffleElems = () => {
const wrapper = document.querySelector(".tiled-gallery__gallery");
const items = wrapper.querySelectorAll(
".tiled-gallery__row .tiled-gallery__col"
);

for (var i = items.length; i >= 0; i--) {
wrapper.appendChild(items[(Math.random() * i) | 0]);
}
};

shuffleElems();

Это работает в том смысле, что элементы переупорядочиваются, но при этом можно добавить один элемент в столбец, который должен занимать два. Поэтому я предполагаю, что мне нужен какой-то способ отслеживания исходного индекса и нового, либо используя модуль, либо проверяя родительский класс. Или, возможно, перетасовать все в классах столбца-2, а затем просто поменять местами одну строку в самом конце?
Надеюсь, это имеет смысл, весь код находится в codeandbox.
Скоро я добавлю скриншот.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -insert-th