SO-20302965

by Trevor Dowdle

HTML

<div id="main">
    <div id="left">
        <div class="dataCard" data-cardNumber="1">.1..</div>
        <div class="dataCard" data-cardNumber="3">.3..</div>
        <div class="dataCard" data-cardNumber="5">.5..</div>
    </div>
    <div id="right">
        <div class="dataCard" data-cardNumber="2">.2..</div>
        <div class="dataCard" data-cardNumber="4">.4..</div>
    </div>
</div>

CSS

#right {
    background-color:red;
}
#left {
    background-color:yellow;
}

JavaScript

var x = $('#main .dataCard').sort(function (a, b) {
    return $(a).data('cardnumber') - $(b).data('cardnumber');
});

for(var i = 0; i < x.length;i++){
    if($('#left').height() <= $('#right').height()){
        $('#left').append(x[i]);
    }
    else
        $('#right').append(x[i]);  
});