рони, а если добавить еще пунктов и подпунктов, то что-то не то получается. Надо чтобы равномерно распределялись
без дробления вложенных, в первую очередь в первый столбец, а потом уже примерно одинаковое количество во второй и так далее (если указать 3 или 4 и более столбцов), но никак не больше пунктов добавлять во второй, то есть чтобы были не больше высоты первого столбца...
В общем чтобы были столбцы примерно одинаковой высоты и пункты не вылазили за пределы контейнера
<ul class="column-list-js">
........
</ul>
А сейчас если добавить еще пунктов и подпунктов (вложенных ul li), то получается вот что:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Column Lists</title>
<meta name="description" content="">
<style>
.column-list-js{ width:100%;position:relative;padding: 0 10px;border:1px solid #000;}
.column-list{ display: inline-block;width:50%;}
.column-listxxx-1{position:absolute;top:0}
.column-list li{ margin:15px 0}
.column-list-js li ul { margin-left: -25px;}
</style>
</head>
<body>
<ul class="column-list-js">
<li>Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3</li>
<li>Пункт #4</li>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Пункт #7.1</li>
<li>Пункт #7.2</li>
<li>Пункт #7.3</li>
<li>Пункт #7.4</li>
<li>Пункт #7.5</li>
<li>Пункт #7.6</li>
<li>Пункт #7.7</li>
<li>Пункт #7.8</li>
<li>Пункт #7.9</li>
</ul>
</li>
<li>Пункт #8
<ul>
<li>Пункт #8.1</li>
<li>Пункт #8.2</li>
<li>Пункт #8.3</li>
</ul>
</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11
<ul>
<li>Пункт #11.1</li>
<li>Пункт #11.2</li>
<li>Пункт #11.3</li>
<li>Пункт #11.4</li>
<li>Пункт #11.5</li>
<li>Пункт #11.6</li>
</ul>
</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
<li>Пункт #17</li>
<li>Пункт #18</li>
<li>Пункт #19</li>
<li>Пункт #20</li>
<li>Пункт #21</li>
<li>Пункт #22</li>
<li>Пункт #23</li>
<li>Пункт #24</li>
<li>Пункт #25</li>
<li>Пункт #16</li>
<li>Пункт #27</li>
<li>Пункт #28</li>
<li>Пункт #29</li>
<li>Пункт #30</li>
<li>Пункт #31</li>
<li>Пункт #32</li>
<li>Пункт #33</li>
<li>Пункт #34</li>
<li>Пункт #35</li>
<li>Пункт #37</li>
<li>Пункт #37</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012
;(function( $ ) {
$.fn.columnlist = function ( options ) {
options = $.extend( {}, $.fn.columnlist.defaults, options );
return this.each(function () {
var
$list = $( this ),
size = options.size || $list.data( 'columnList' ) || 1,
$children = $list.children( 'li' ),
lis = $list.find( 'li' ),
perColumn = Math.ceil( lis.length / size ),
$column,
k = 0;
for (var i = 0; i < size; i++) {
$column = $('<ul />').appendTo( returnColumn( i ) );
for ( var j = 0; j < perColumn; j++ ) {
var children = $children.eq(k);
var len = children.find('li').length
if ( k < lis.length && j + len < perColumn) {
$column.append(children);
k++;
j += len;
}
}
$list.append( $column.parent() );
}
});
function returnColumn ( inc ) {
return $('<li class="' + options.incrementClass + inc + ' ' + options[ 'class' ] + '"></li>');
}
};
$.fn.columnlist.defaults = {
'class' : 'column-list',
incrementClass : 'column-list-'
};
})( jQuery );
// настройки
$('ul.column-list-js').columnlist({
size : 2,
'class' : 'column-list',
incrementClass : 'column-listxxx-'
});
</script>
</body>
</html>