var interval = 500;
function nodesGenerator(n) {
var frame = document.getElementById("frame");
for (var i = 0; i < n; i++) {
var node = document.createElement("div");
node.setAttribute("class", "node");
node.style.height = (Math.floor(Math.random() * 250) + 1) + "px";
frame.appendChild(node);
}
}
nodesGenerator(400);
function domQuickSort(array, first, last) {
if (first >= last) {
return;
}
var base = parseInt(array[first - 1].style.height.match(/\d+/));
var i = first - 1;
var j = last - 1;
var temp;
while (j > i) {
while (j > i && parseInt(array[j].style.height.match(/\d+/)) > base) {
j--;
}
while (i < j && parseInt(array[i].style.height.match(/\d+/)) <= base) {
i++;
}
temp = array[i].style.height;
array[i].style.height = array[j].style.height;
array[j].style.height = temp;
}
temp = array[first - 1].style.height;
array[first - 1].style.height = array[i].style.height;
array[i].style.height = temp;
setTimeout(function(argument) {
domQuickSort(array, first, i);
}, interval);
setTimeout(function(argument) {
domQuickSort(array, i + 2, last)
}, interval);
}
setTimeout(function (argument) {
domQuickSort(document.getElementsByClassName("node"), 1, document.getElementsByClassName("node").length);
}, interval);
<body>
<div id="frame">
</div>
<script src="script/test.js"></script>
</body>
* {
padding: 0;
margin: 0;
}
#frame {
position: relative;
width: 400px;
height: 250px;
margin: 0 auto;
background-color: gray;
}
.node {
position: relative;
float: left;
width: 1px;
background-color: black;
}