Consider this example of an HTML page content:
<ul>
<li class="item1">A</li>
<li class="item2">B</li>
<li class="item3">C</li>
<li class="item4">D</li>
<li class="item5">E</li>
<li class="item6">F</li>
<li class="item7">G</li>
<li class="item8">H</li>
<li class="item9">I</li>
<li class="item10">J</li>
<li class="item11">K</li>
<li class="item12">L</li>
<li class="item13">M</li>
<li class="item14">N</li>
<li class="item15">O</li>
</ul>
Now, utilize JavaScript to dynamically generate the necessary CSS for layout styling:
/*
unorderedList: the ul element in the HTML
columnSize: number of items per column
columnGap: space between columns in ems
offset: initial margin left offset in ems
*/
function createMultiColumnLayout(unorderedList, columnSize, columnGap, offset) {
var items = unorderedList.getElementsByTagName("li");
for (var i = 0, l = items.length; l--; i++) {
var itemStyle = items[i].style;
itemStyle.lineHeight = "1.2em";
if (!i && i % columnSize == 0) { // current column
itemStyle.marginLeft = offset + "em";
} else { // new column
offset += columnGap;
itemStyle.marginLeft = offset + "em";
itemStyle.marginTop = -columnSize + "em";
}
}
}
window.onload = function () {
var items = document.getElementsByClassName("item1");
for (var i = 0, l = items.length; l--; i++) {
createMultiColumnLayout(items[i].parentElement, 8, 10, 5);
}
};