JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="data" class="Column1" style="float:left;">
<!-- developed by subhajit Panja-->
<li>list Item 1</li>
<li>list Item 2</li>
<li>list Item 3</li>
<li>list Item 4</li>
<li>list Item 5</li>
<li>list Item 6</li>
<li>list Item 7</li>
<li>list Item 8</li>
<li>list Item 9</li>
<li>list Item 10</li>
<li>list Item 11</li>
<li>list Item 12</li>
<li>list Item 13</li>
<li>list Item 1</li>
<li>list Item 2</li>
<li>list Item 3</li>
<li>list Item 4</li>
<li>list Item 5</li>
<li>list Item 6</li>
<li>list Item 7</li>
<li>list Item 8</li>
<li>list Item 9</li>
<li>list Item 10</li>
<li>list Item 11</li>
<li>list Item 12</li>
</ul>
CSS
li {
list-style:none;
}
JavaScript
$(document).ready(function () {
var size = $("#data > li").size();
var noOfCulm = 3;
// $(".Column1 > li").each(function (index) {
// if (index >= size / 3) {
// $(this).appendTo("#Column2");
// }
// });
var min_item_perCol = Math.floor( size / noOfCulm );
var offset = size - min_item_perCol*noOfCulm;
items_per_col = new Array()
var offsetadd = Math.ceil( offset / noOfCulm );
var isadd = 0;
for (var i = 0; i < noOfCulm ; i++) {
if (i < noOfCulm - 1 ) {
items_per_col[i] = min_item_perCol + offsetadd ;
isadd++;
} else {
items_per_col[i] = items_per_col[i-1] - offsetadd*isadd;
}
}
alert( items_per_col );
for (var i = 0; i < noOfCulm ; i++) {
$(this).append($('<ul id=sub_'+ i +'></ul>').addClass(listClass));
for (var j = 0; j < items_per_col[i]; j++) {
}
}
});