If you need to accomplish this task, you have the option to develop a jQuery plugin!
A simple function has been included to specify the desired number of columns and the class name to be used.
/* Implementing a jQuery Plugin */
(function($) {
$.fn.columnize = function(config) {
var defaults = {
colCount : 3,
wrapperElement : $('<div class="wrapper-element">'),
transpose : false
};
config = $.extend(defaults, config || {}); // Applying defaults
var perColumn = Math.ceil(this.children().size() / config.colCount);
var colWidth = (100 / config.colCount).toFixed(3) + '%';
var $columns = [];
for (var col = 0; col < config.colCount; col++) {
$columns.push(config.wrapperElement.clone().css({
display : 'inline-block',
width : colWidth
}));
}
this.children().each(function(index, child) {
$(child).appendTo($columns[
config.transpose !== false
? (index % config.colCount) // Items added Left to Right
: Math.floor(index / perColumn) // Items added Top to Bottom
]);
});
return this.empty().append($columns);
};
})(jQuery);
$(function() {
// Transforming the existing list into columns! Default is already set to 3.
$('#dropdown-content1').columnize({
wrapperElement : $('<div>').addClass('ColWrapper') // Overriding default wrapper.
});
});
.ColWrapper {
outline: 1px #DDD solid;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-content1">
<div class="CatsColumn">1</div>
<div class="CatsColumn">2</div>
<div class="CatsColumn">3</div>
<div class="CatsColumn">4</div>
<div class="CatsColumn">5</div>
<div class="CatsColumn">6</div>
<div class="CatsColumn">7</div>
<div class="CatsColumn">8</div>
<div class="CatsColumn">9</div>
<div class="CatsColumn">10</div>
<div class="CatsColumn">11</div>
<div class="CatsColumn">12</div>
<div class="CatsColumn">13</div>
<div class="CatsColumn">14</div>
<div class="CatsColumn">15</div>
<div class="CatsColumn">16</div>
<div class="CatsColumn">17</div>
<div class="CatsColumn">18</div>
<div class="CatsColumn">19</div>
</div>
If you prefer, $.fn.wrapAll could be utilized to simplify this process. This eliminates the need for creating an array.
var childSelector = '.CatsColumn';
for (var col = 0; col < config.colCount; col++) {
var startIndex = (col * (perColumn - 1)) + col;
var endIndex = startIndex + perColumn;
$(childSelector).slice(startIndex, endIndex).wrapAll(config.wrapperElement.clone().css({
display : 'inline-block',
width : colWidth
}));
}