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 () {
    var $wrapper = $('#wrapper'),
        $articles = $wrapper.find('.article');
    [].sort.call($articles, function(a,b) {
        return +$(a).attr('data-weight') - +$(b).attr('data-weight');
    });
    $articles.each(function(){
        $wrapper.append(this);
    });
});