JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<div id="links" data-spring-plugin="tiles">
    <div class="panel" data-tiles-weight="2">2</div>
    <div class="panel" data-tiles-weight="3">3</div>
    <div class="panel" data-tiles-weight="4">4</div>
    <div class="panel" data-tiles-weight="4">4</div>
    <div class="panel" data-tiles-weight="2">2</div>
    <div class="panel" data-tiles-weight="4">4</div>
    <div class="panel" data-tiles-weight="3">3</div>
    <div class="panel" data-tiles-weight="2">2</div>
</div>

CSS

#links {
    background-color: #efefef;
    overflow: hidden;
}

.panel {
    height: 200px;
    margin: 1%;
    float: left;
    background-color: #ccc;
}

.w1 {
    background-color: #ffeeff;
}

.w2 {
    background-color: #ffeeff;
}

.w3 {
    background-color: #eeffff;
}

.w4 {
    background-color: #ffffee;
}

JavaScript

//look for plugin
var container = $("*[data-spring-plugin='tiles']");
cols = container.find('.panel');
idealrowwidth = 10;
totalweight = '';

//get total cell counts
var numbers = [];
cols.each(function() {
    thisval = $(this).data('tiles-weight');
    numbers.push($(this).data('tiles-weight'));
    totalweight = +totalweight + +thisval;
});

var total;
var rows = [];
var index = -1;
while (numbers.length) {
    total = 0;
    index++;
    rows[index] = [];
    while (total + numbers[0] <= idealrowwidth ) {
      total += numbers[0];
      rows[index].push(numbers.shift());
    }
}

var i = 0;
for (var key in rows) {
    if (rows.hasOwnProperty(key)) {
        var obj = rows[key];
    
        sum = 0;
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                sum += obj[prop];
            }
        }
    
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                adjustment = idealrowwidth / sum;
                thiswidth = obj[prop];
                newwidth = thiswidth * adjustment * 10 - 2;
                cols.eq(i).width(newwidth + '%').addClass('w'+thiswidth);
                i++;
            }
        }
    }
}