JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="dwButton" value="Get new data-weights">
<input type="button" id="sortButton" value="Sort by data-weights">
<div id="wrapper">
    <div class="article fix" data-weight="1">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_05.jpg" /> <span class="dw"></span>
    </div>
    <div class="article">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_04.jpg" /> <span class="dw"></span>

    </div>
    <div class="article">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_06.jpg"> <span class="dw"></span>

    </div>
    <div class="article">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_07.jpg"> <span class="dw"></span>

    </div>
    <div class="article" data-weight="0.0001">
        <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg"> <span class="dw"></span>

    </div>
</div>

CSS

div {
    padding-top:20px;
}
.article {
    width:100px;
}
.article img {
    width:100%;
    height:auto;
}

JavaScript

//assign new data-weights for later sorting
$("#dwButton").on("click", function () {
    var rand = 0;
    $('#wrapper .article').each(function () {
        rand = Math.random();
        $(this).attr('data-weight', rand);
        $(this).children('.dw').html(rand);
    });
});

$("#sortButton").on("click", function () {
    $('#wrapper .article').each(function () {
        if ($(this).attr('data-weight') <= $(this).next().attr('data-weight')) {
            $(this).insertAfter($(this).next());
        };
    });
});