Shuffle a set of HTML elements with jQuery
Re-arrange the child elements of a given parent element to be in a random order using jQuery.
HTML
<div class="gallery"></div>
CSS
.gallery {
display: flex;
flex-wrap: wrap;
}
.img {
flex: 0 0 20%;
max-width: 20%;
height: 0;
padding-bottom: 20%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
JavaScript
var linksArray = [
'http://lorempixel.com/400/400/people/1/',
'http://lorempixel.com/400/400/people/2/',
'http://lorempixel.com/400/400/people/3/',
'http://lorempixel.com/400/400/people/4/',
'http://lorempixel.com/400/400/people/5/',
'http://lorempixel.com/400/400/people/6/',
'http://lorempixel.com/400/400/people/7/',
'http://lorempixel.com/400/400/people/8/',
'http://lorempixel.com/400/400/people/9/',
'http://lorempixel.com/400/400/people/10/',
'http://lorempixel.com/400/400/nightlife/1/',
'http://lorempixel.com/400/400/nightlife/2/',
'http://lorempixel.com/400/400/nightlife/3/',
'http://lorempixel.com/400/400/nightlife/4/',
'http://lorempixel.com/400/400/nightlife/5/',
'http://lorempixel.com/400/400/nightlife/6/',
'http://lorempixel.com/400/400/nightlife/7/',
'http://lorempixel.com/400/400/nightlife/8/',
'http://lorempixel.com/400/400/nightlife/9/',
'http://lorempixel.com/400/400/nightlife/10/',
'http://lorempixel.com/400/400/nature/1/',
'http://lorempixel.com/400/400/nature/2/',
'http://lorempixel.com/400/400/nature/3/',
'http://lorempixel.com/400/400/nature/4/',
'http://lorempixel.com/400/400/nature/5/',
'http://lorempixel.com/400/400/nature/6/',
'http://lorempixel.com/400/400/nature/7/',
'http://lorempixel.com/400/400/nature/8/',
'http://lorempixel.com/400/400/animals/9/',
'http://lorempixel.com/400/400/nature/10/',
'http://lorempixel.com/400/400/fashion/1/',
'http://lorempixel.com/400/400/technics/2/',
'http://lorempixel.com/400/400/fashion/3/',
'http://lorempixel.com/400/400/fashion/4/',
'http://lorempixel.com/400/400/fashion/5/',
'http://lorempixel.com/400/400/fashion/6/',
'http://lorempixel.com/400/400/fashion/7/',
'http://lorempixel.com/400/400/fashion/8/',
'http://lorempixel.com/400/400/fashion/10/',
'http://lorempixel.com/400/400/technics/1/',
];
document.addEventListener('DOMContentLoaded', function () {
var gallery = document.querySelector('.gallery');
...