collapse vertical whitespace between stacked siblings in div

squeeze.js

Function.prototype.debounce = function (threshold, execAsap) {
    var func = this,timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap) func.apply(obj, args);
            timeout = null; 
        };
        if (timeout) clearTimeout(timeout);
        else if (execAsap) func.apply(obj, args); // execute now
        timeout = setTimeout(delayed, threshold || 100); 
    };
}
function previousSiblingAbove(node){
    var previous=node.previousElementSibling;
    while(previous){
        if(node.offsetLeft===previous.offsetLeft) 
            break;
        previous=previous.previousElementSibling
    }
    return previous;
}
function doTransform(el, transform, duration){
    el.style['-webkit-transition'] = "all "+duration+"s ease-in-out";
    el.style['-webkit-transform'] = transform
    var listener=function() {
        el.removeEventListener("webkitTransitionEnd", listener);
        el.style['-webkit-transition'] = "";
    };
    el.addEventListener("webkitTransitionEnd", listener);
}
function arrange3(divs){
    Array.prototype.reduce.call(divs, function(p,c,i,a){
        c.style['-webkit-transform'] = "";
        var b4=previousSiblingAbove(c),
            b4i=Array.prototype.indexOf.call(divs,b4),
            diff=computeTransform(c, b4);
        if(p[b4i]!==null && p[b4i]!==undefined && !isNaN(p[b4i].diff)){
            diff+=p[b4i].diff;
        }
        
        p.push({diff:diff});
        return p;
    },[])
    .map(function(n,i){
        if(n.diff && n.diff!==undefined){
            doTransform(divs[i],"translateY(" + n.diff + "px)",0.25);
        }
    })
}
function computeTransform(b, a){
    if(a){
        var arect=a.getBoundingClientRect(),
            brect=b.getBoundingClientRect();
        return arect.bottom-brect.top;
    }
}
(function() {
    var db = document.createElement('div'),
        r = (document.body.clientWidth * 0.75) / 3,
        h = 0,
        dl = 12,
        i = 0,
        arrange=arrange3.debounce(100),
        divs = Array.prototype.map.call(new Int8Array(dl), function(d) { //div array
            d = document.createElement('div'); //create the element
            h = 10 + Math.round(r/2 * Math.random()); //make it a random size
            d.id = "div_" + (i++);
            with(d.style) {
                background = '#' + Math.floor(Math.random() * 16777215).toString(16); //random bg color
                position = 'relative'; //relative positioning for flow
                display = 'inline-block'; //make it display as a floating square
                width = '100px'; //set width
                height = h + 'px'; //set a random height
                border = "1px solid black";
            }
            d.innerText = d.id;
            db.appendChild(d); //append the new div to the container
            return d;
        });
    (function(t) {
        db.style.position = "relative";
        db.style.width = "75%";
        db.style.height = (2 * r) + "px";
        db.style.float = "left";
        document.body.appendChild(db);
        window.addEventListener("resize", function() {
            arrange(divs);
        });
        arrange(divs);
    }());
}())