I have the following markup:
<div class="">
<div class="tiled-gallery__gallery">
<div class="tiled-gallery__row columns-1">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-dan/">
<img
srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=600%2C600&strip=info&ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=900%2C900&strip=info&ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=1200%2C1200&strip=info&ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=1500%2C1500&strip=info&ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=1800%2C1800&strip=info&ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-dan-1024x1024.jpeg?resize=2000%2C2000&strip=info&ssl=1 2000w"
/>
</a>
</figure>
</div>
</div>
<div class="tiled-gallery__row columns-2">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-jessica/">
<img
srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-jessica-1024x1024.jpg?resize=600%2C600&strip=info&ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-jessica-1024x1024.jpg?resize=900%2C900&strip=info&ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-jessica-1024x1024.jpg?resize=1132%2C1132&strip=info&ssl=1 1132w"
/>
</a>
</figure>
</div>
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/rebecca-2/">
<img
srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=600%2C600&strip=info&ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=900%2C900&strip=info&ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=1200%2C1200&strip=info&ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/Rebecca-1-1024x1024.jpg?resize=1333%2C1333&strip=info&ssl=1 1333w"
/>
</a>
</figure>
</div>
</div>
<div class="tiled-gallery__row columns-2">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-2/">
<img
srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=600%2C600&strip=info&ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=900%2C900&strip=info&ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=1200%2C1200&strip=info&ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=1500%2C1500&strip=info&ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=1800%2C1800&strip=info&ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-2-1024x768.jpeg?resize=2000%2C2000&strip=info&ssl=1 2000w"
/>
</a>
</figure>
</div>
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-4/">
<img
srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=600%2C600&strip=info&ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=900%2C900&strip=info&ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=1200%2C1200&strip=info&ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=1500%2C1500&strip=info&ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=1800%2C1800&strip=info&ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-4-733x1024.jpeg?resize=2000%2C2000&strip=info&ssl=1 2000w"
/>
</a>
</figure>
</div>
</div>
<div class="tiled-gallery__row columns-2">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-teram-test-3/">
<img
srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=600%2C600&strip=info&ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=900%2C900&strip=info&ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=1200%2C1200&strip=info&ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=1500%2C1500&strip=info&ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=1800%2C1800&strip=info&ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-teram-test-3-1024x718.jpg?resize=2000%2C2000&strip=info&ssl=1 2000w"
/>
</a>
</figure>
</div>
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-1/">
<img
srcset="https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=600%2C600&strip=info&ssl=1 600w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=900%2C900&strip=info&ssl=1 900w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=1200%2C1200&strip=info&ssl=1 1200w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=1500%2C1500&strip=info&ssl=1 1500w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=1800%2C1800&strip=info&ssl=1 1800w,https://i0.wp.com/staging-7578-youthlandscapers.wpcomstaging.com/wp-content/uploads/2024/12/our-team-test-1-768x1024.jpg?resize=2000%2C2000&strip=info&ssl=1 2000w"
/>
</a>
</figure>
</div>
</div>
</div>
</div>
I want to be able to shuffle each item: <div class="tiled-gallery__item"> into a random position, however the issue I have is that the first item has a parent container which specifies 1 column columns-1 although most of the markup uses the 2 column layout class columns-2.
I have written a basic shuffle using this 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();
This works in that it will rearrange the items, but it could add a single item into a column that should take two. So I assume I need some way of tracking the original index and the new one, and either using a modulus, or checking the parent class. Or possibly shuffling everything in the column-2 classes and then just swap the single row at the very end?
I hope this makes sense, all of the code is in codesandbox.
I will add a screenshot shortly.
however the issue I have is that the first item has a parent container which specifies 1 column columns-1 although most of the markup uses the 2 column layout class columns-2.
Since that structure is what's problematic here - let's just ignore it then :-)
Get your gallery items, convert to an array, and shuffle that.
And then, loop over your columns - and simply append an item from the shuffled array to each one.
(I replaced the images with simple numbers in text form here, and added an outline to the .tiled-gallery__row elements, so that we can easily see the items get shuffled, but stay within the given structure.)
let items = [...document.querySelectorAll('.tiled-gallery__gallery .tiled-gallery__item')];
shuffleArray(items);
document.querySelectorAll('.tiled-gallery__gallery .tiled-gallery__col').forEach(function(parent, index) {
parent.appendChild(items[index]);
});
// array shuffle function grabbed from the internet, feel free to replace with your own
function shuffleArray(array) {
for (let i = array.length - 1; i >= 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}.tiled-gallery__row { outline: 1px solid blue; }<div class="">
<div class="tiled-gallery__gallery">
<div class="tiled-gallery__row columns-1">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-dan/">
1
</a>
</figure>
</div>
</div>
<div class="tiled-gallery__row columns-2">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-jessica/">
2
</a>
</figure>
</div>
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/rebecca-2/">
3
</a>
</figure>
</div>
</div>
<div class="tiled-gallery__row columns-2">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-2/">
4
</a>
</figure>
</div>
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-4/">
5
</a>
</figure>
</div>
</div>
<div class="tiled-gallery__row columns-2">
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-teram-test-3/">
6
</a>
</figure>
</div>
<div class="tiled-gallery__col">
<figure class="tiled-gallery__item">
<a href="https://staging-7578-youthlandscapers.wpcomstaging.com/2024/12/11/our-team/our-team-test-1/">
7
</a>
</figure>
</div>
</div>
</div>
</div>