JSFiddle - React, Tailwind, and code Playground

HTML

<div id="MainDiv">
    <img id="ship1" src="http://cdn-img.easyicon.net/png/154/15462.png" />
    <img id="ship2" src="http://cdn-img.easyicon.net/png/154/15462.png" />
    <img id="ship3" src="http://cdn-img.easyicon.net/png/154/15462.png" />
</div>

CSS

#MainDiv {
    position:absolute;
}
#MainDiv img {
    position:absolute;
}
#ship1 {
    top:10px;
    left:200px;
}
#ship2 {
    top:210px;
    left:0px;
}
#ship3 {
    top:210px;
    left:400px;
}

JavaScript

var ships = [] /* array of ships */
var time_anim = 500 /* anim time */

$(document).ready(function () {
    ships = $("#MainDiv img"); /* find ships */
    shuffle(6); /* wheeee */
});

function shuffle(level) {
    /* do the animation */
    var c = randInt(2, 3)
    cycle(getElements(ships, c))

    if (level > 1) {
        setTimeout(function () {
            shuffle(level - 1)
        }, time_anim)
    }
}

function randInt(min, max) {
    /* get random integer */
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function cycle(items) {
    /* cycle ships in array */
    var pos0 = $(items[0]).position()

    for (i = 1; i < items.length; i++) {
        var sh = items[i];
        var shp = $(sh).position();

        $(items[i - 1]).animate({
            "left": shp.left,
                "top": shp.top
        }, time_anim);
    }

    $(sh).animate({
        "left": pos0.left,
            "top": pos0.top
    }, time_anim);
}

function getElements(arr, n) {
    /* Get n random elements from array */
    var used = []
    var result = []

    while (result.length < n && result.length < arr.length) {
        var i = randInt(0, arr.length - 1)
        if (jQuery.inArray(i, used) !== -1) {
            continue;
        }

        used.push(i)
        result.push(arr[i])
    }

    return result;
}