JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="menu">
    <button class="shuffle-images">Shuffle images</button>
    <button class="chng-places">Change places of columns</button>
    <button class="hide-menu">Hide menu</button>
</div>
<div class="columns-wrapper">
    <div class="left">Left</div>
    <div class="right">
        <div class="wrapper">
            <img src="http://placekitten.com/200/300" />
            <img src="http://placekitten.com/220/330" />
            <img src="http://placekitten.com/210/310" />
            <img src="http://placekitten.com/190/290" />
            <img src="http://placekitten.com/g/200/300" />
            <img src="http://placekitten.com/210/310" />
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
}

.left, .right {
    width: 50%;
    height: 200px;
    display: inline-block;
    color: white;
}

/*Так как в условиях не говорилось про кроссбраузерность, решил использовать транзишн*/
 .left {
    background: black;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
}

.right {
    background: red;
    -webkit-transition: right 0.5s;
    -moz-transition: right 0.5s;
    -o-transition: right 0.5s;
    transition: right 0.5s;
}

.wrapper div {
    vertical-align: bottom;
    display: inline-block;
    
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

span {
    line-height: 2em;
}

.wrapper {
    width: 300px;
    border: 1px solid gray;
    background: silver;
}

.columns-wrapper {
    position: relative;
}

.red {
    width: 50px;
    height: 150px;
    background: red;
}
.yellow {
    width: 90px;
    height: 50px;
    background: yellow;
}
.blue {
    width: 80px;
    height: 80px;
    background: blue;
}
.green {
    width: 80px;
    height: 100px;
    background: green;
}
.purple {
    width: 95px;
    height: 95px;
    background: purple;
}
.relative {
    position: relative;
}
.menu {
    background: whitesmoke;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

JavaScript

function shuffleImages() {
    function addImagesToArr(el) {
        imgArr.push(el);
    }

    function shuffleArray(arr) {
        Array.prototype.sort.call(arr, function (a, b) {
            return Math.random() - 0.5;
        });
    }

    function hideImg(el) {
        el.style.opacity = 0;
    }

    function showImg(el) {
        el.style.opacity = 1;
    }

    function appendImages(el) {
        wrapper.appendChild(el);
    }

    Array.prototype.forEach.call(images, addImagesToArr);
    shuffleArray(imgArr);
    console.log(shuffleArray);
    Array.prototype.forEach.call(images, hideImg);

    setTimeout(function () {
        Array.prototype.forEach.call(imgArr, appendImages);
    }, 200);

    setTimeout(function () {
        Array.prototype.forEach.call(images, showImg);
    }, 250);
}

var imgArr = [];
var images = document.querySelectorAll('img');
var shuffleButton = document.querySelector('.shuffle-images');
var wrapper = document.querySelector('.wrapper');

shuffleButton.onclick = shuffleImages;