JSFiddle - React, Tailwind, and code Playground

by dvjc

HTML

<div id="blue" class="one contentColumn1">
  <ol id="green">
    <li id="red">one.one.one</li>
  </ol>
</div>

<div id="blue2" class="one contentColumn2">
  <ol id="green2">
    <li id="red2">two.one.one</li>
    <li id="white2">two.one.two</li>
  </ol>
  <ol id="orange2">
    <li id="yellow2">two.two.one</li>
    <li id="pink2">two.two.two</li>
  </ol>
</div>

<div id="blue3" class="one contentColumn3">
  <ol id="green3">
    <li id="red3">three.one.one</li>
    <li id="white3">three.one.two</li>
  </ol>
  <ol id="orange3">
    <li id="yellow3">three.two.one</li>
    <li id="pink3">three.two.two</li>
  </ol>
  <ol id="purple3">
    <li id="magenta3">three.three.one</li>
    <li id="puce3">three.three.two</li>
  </ol>
</div>

<br /><hr>
<div id="results"></div>

JavaScript

// action
var resultsDiv = document.getElementById("results");
resultsDiv.innerText = getMinimumRows(50,3);

// returns the number of minimum number of rows required to
// accommodate the collection of list elements in each
// element with a class of "contentColumnX"
function getMinimumRows(rowCharacterWidth,maxCols){
  var count=0,max=0;
  var ele;
  for( var x=0;x<maxCols;x++ ){
    ele = document.getElementsByClassName("contentColumn" + (x+1));
    if( ele && ele.length==1 ){
      count=getEleMinimumRows(ele[0],"LI",rowCharacterWidth);
      max=(max<count)?count:max;
    }
  }
  ele = undefined;
  return max;
}

function getEleMinimumRows(ele,TAGNAME,width){
  var count=0;
  if( ele ){

    // test if ele has the tagName
    if( ele.tagName==TAGNAME ){
      count+=approxRowCount(ele,width);
    } else 

    // test if ele is a collection
    if( ele.children.length>0 ){
      for( var x=0;x<ele.children.length;x++ ){

        // test if the xth element of ele has the tagName
        if( ele.children[x].tagName==TAGNAME ){

          // if so, increment
          count+=approxRowCount(ele.children[x],width);
        } else

        // otherwise, if it has children, recurse
        if( ele.children[x].children.length>0 ){
          count+=getEleMinimumRows(ele.children[x],TAGNAME,width);
        }
      }
    }
  }

  return count;
}

function approxRowCount(ele,rowCharacterWidth){
  var count = 0;
  if( ele && ele.innerText ){
    count = convertContentToRows(ele.innerText,rowCharacterWidth);
    actualen = undefined;
    len = undefined;
  }
  return count;
}

function convertContentToRows(content,width){
  var rows=0,literal=(content.length);
  if( content && literal>0 ){
    var len = (literal%width==0)?literal-1:literal;    
    rows = Math.round((0.5+(len/width)),0);
  }
  return rows;
}