flexbox experiment

trying flexboxes for a particular layout

by fschwiet

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jade/0.27.7/jade.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div id="so">SEO(please enable javascript~)</div>
<pre id="jadehi" style="display:none">
div.column-container
    div.column
        div.entry(data-start=1,data-length=1) one
        div.entry(data-start=2,data-length=1) two
        div.entry(data-start=3,data-length=2) three
        div.entry(data-start=5,data-length=1) five
        div.entry(data-start=6,data-length=1) six
        div.entry(data-start=7,data-length=2) seven
        div.entry(data-start=9,data-length=2) nine
        div.entry(data-start=11,data-length=2) elevent
     div.column
        div.entry(data-start=1,data-length=4) one
        div.entry(data-start=9,data-length=4) nine
     div.column
        div.entry(data-start=1,data-length=12) one
    
</pre>

CSS

.column-container {
    display: flex;
    flex-direction: row
}

.column {
    display: flex;
    flex-direction: column
}

.entry {
    margin:4px;
    padding:4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color: yellow;
}

JavaScript

$(function() {
    //jade compile
    var model = {};
    $("#so").html(jade.compile($("#jadehi").html())(model));

    //var entryHeight = $("
    var heightMappings = [];
    
    var slice = Array.prototype.slice;
    
    var firstColumn = document.querySelectorAll(".column-container .column")[0]
    var remainingColumns = slice.call(document.querySelectorAll(".column-container .column"), 1);
    slice.call(firstColumn.querySelectorAll(".entry")).forEach(function(entry) {
        var start = parseInt(entry.getAttribute('data-start'));
        var length = parseInt(entry.getAttribute('data-length'));
        heightMappings.push({
            start: start,
            length: length,
            end: start + length,
            position: entry.offsetTop,
            height: $(entry).outerHeight()
        });
    });
    
    console.log("heightMappings", heightMappings);
    
    remainingColumns.forEach(function(column) {
        var entries = slice.apply(column.querySelectorAll('.entry'));
        
        entries.forEach(function(entry) {
            var entryStart = parseInt(entry.getAttribute('data-start'));
            var entryEnd = entryStart + parseInt(entry.getAttribute('data-length'));
            
            var canStartWith = heightMappings.filter(function(heightMap) {
                return heightMap.start >= entryStart;
            });
            var shouldEndBy = heightMappings.filter(function(heightMap) {
                return heightMap.start + heightMap.length <= entryEnd;
            });
            
            var verticalStart = _.min(canStartWith, function(e) { return e.start; }).position;
            var endBoundary = _.max(shouldEndBy, function(e) { return e.end; });
            var verticalHeight = endBoundary.position + endBoundary.height - verticalStart;
            
            entry.style.top = (verticalStart - entry.offsetTop) + "px";
            entry.style.height = verticalHeight + "px";

            entry.style.position =...