рони,
laimas,
Так как предложил
laimas не получается, тем более уже пробовал так,... значение переменной функция не изменяет, выдает дефолтное значение, а если не объявлять за пределами функции, то выдает ошибку: ReferenceError: a is not defined.
В общем этот тема в продолжение
этой темы, думал здесь спрошу одно, там другое, но что-то получилось не очень. Выкладываю код здесь.
Если функцию или код вызова (настройки функции), которую помог сделать рони, добавить в:
$(window).on("load resize", function() {
// код функции или ее вызова от [b]рони[/b]
});
То при каждом ресайзе создается пустой блок внутри такого же блока... и так до бесконечности...
Вот такая фигня получается:
<div class="cs1">
<ul class="column-list-js">
<li class="column-listxxx-0 column-list">
<ul>
<li class="column-listxxx-0 column-list">
<ul>
<li class="column-listxxx-0 column-list">
<ul>
<li class="column-listxxx-0 column-list">
<ul>
<li class="column-listxxx-0 column-list">
<ul>
<li class="column-listxxx-0 column-list">
<ul>
<li class="column-listxxx-0 column-list">
<ul>
<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>
</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>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Помогите поправить, чтобы не создавались такие пустые блоки при ресайзе.
Вот запускаемый код:
<!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>
.cs1 li {
width:100%;
padding: 2%;
margin: 35px;
outline: 1px dotted dodgerblue;
}
.column-list-js{
padding: 0 10px;
border:1px solid #000;
display: flex;
}
.column-list{
flex: 1;
list-style: none
}
</style>
</head>
<body>
<br>
<div class="cs1">
<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>
</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>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// var sz = 0; //default value
$(window).on("load resize", function() {
var sz = 1;
//other function
;(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' ),
$length = lis.length ,
$column = [],
num = 0,
k = 0;
$children.each(function(i, li) {
var len = $('li', li).length + 1;
k += len;
if(k >= $length / size) {
$column[num] = i;
++num;
--size;
$length -= k;
k = 0;
}
else $column[num] = i;
});
k = 0;
$column.forEach(function(n, i) {
$li = returnColumn( i );
$ul = $('<ul />').appendTo($li);
num = $children.slice(k, n + 1);
k = n + 1;
num.appendTo($ul);
$list.append($li)
})
});
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 : sz, // значение переменной - количество колонок
'class' : 'column-list',
incrementClass : 'column-listxxx-'
});
});
</script>
</body>
</html>