Помогите исправить JQuery плагин для разделения UL на равные списки
Плагин: https://github.com/weblinc/jquery-columnlist
Плагин разделяет нормально на одинаковое количество li в каждом ul когда исходный список такой:
<ul class="column-list-js">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
Но если список со вложенными ul li, например такой:
<ul class="column-list-js">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3
<ul>
<li>Item #3.1</li>
<li>Item #3.2</li>
<li>Item #3.3</li>
<li>Item #3.3</li>
<li>Item #3.2</li>
<li>Item #3.3</li>
<li>Item #3.3</li>
</ul>
</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
То если делать с помощью css список в несколько столбцов, например, в 2 столбца, то столбцы получаются не одинаковые, то есть вложенные ul li не учитываются. Помогите исправить плагин, чтобы он учитывал вложенные ul li и формировал примерно одинаковые по высоте столбцы, однако чтобы вложенные ul li оставаличь в одном столбце, а не переносились в другой. Для примера, ЧТОБЫ ДЕЛИЛ ВОТ ТАК:
<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>Воскресенск, юридическая консультация в Воскресенске</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 class="column-listxxx-0 column-list">
<ul>
<li>Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3
<ul>
<li>Подпункт #3.1</li>
<li>Подпункт #3.2</li>
<li>Подпункт #3.3</li>
<li>Подпункт #3.4</li>
<li>Подпункт #3.5</li>
<li>Подпункт #3.6</li>
<li>Подпункт #3.7</li>
<li>Подпункт #3.8</li>
<li>Подпункт #3.9</li>
</ul>
</li>
<li>Пункт #4
<ul>
<li>Пункт #4.1</li>
<li>Пункт #4.2</li>
<li>Пункт #4.3</li>
</ul>
</li>
</ul>
</li>
<li class="column-listxxx-1 column-list">
<ul>
<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>
</ul>
</li>
<li>Пункт #8</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
</ul>
</li>
</ul>
</body>
</html>
СЕЙЧАС ПЛАГИН ДЕЛИТ ВОТ ТАК:
<!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
<ul>
<li>Подпункт #3.1</li>
<li>Подпункт #3.2</li>
<li>Подпункт #3.3</li>
<li>Подпункт #3.4</li>
<li>Подпункт #3.5</li>
<li>Подпункт #3.6</li>
<li>Подпункт #3.7</li>
<li>Подпункт #3.8</li>
<li>Подпункт #3.9</li>
</ul>
</li>
<li>Пункт #4
<ul>
<li>Пункт #4.1</li>
<li>Пункт #4.2</li>
<li>Пункт #4.3</li>
</ul>
</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>
</ul>
</li>
<li>Пункт #8</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11</li>
<li>Пункт #12</li>
<li>Пункт #13</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' ),
perColumn = Math.ceil( $children.length / size ),
$column;
for (var i = 0; i < size; i++) {
$column = $('<ul />').appendTo( returnColumn( i ) );
for ( var j = 0; j < perColumn; j++ ) {
if ( $children.length > i * perColumn + j ) {
$column.append( $children[ i * perColumn + j ]);
}
}
$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>
|
columnlist jquery
ozoro,
вариант, если вложенные не надо "дробить" ...
<!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>
<h1>jQuery Column Lists</h1>
<h2>Колонки</h2>
<ul class="column-list-js">
<li>Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3
<ul>
<li>Пункт #3.1</li>
<li>Пункт #3.2</li>
<li>Пункт #3.3</li>
<li>Пункт #3.4</li>
<li>Пункт #3.5</li>
<li>Пункт #3.6</li>
<li>Пункт #3.7</li>
<li>Пункт #3.8</li>
<li>Пункт #3.9</li>
</ul>
</li>
<li>Пункт #4
<ul>
<li>Пункт #4.1</li>
<li>Пункт #4.2</li>
<li>Пункт #4.3</li>
</ul>
</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>
</ul>
</li>
<li>Пункт #8</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11</li>
<li>Пункт #12</li>
<li>Пункт #13</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>
|
рони, а если добавить еще пунктов и подпунктов, то что-то не то получается. Надо чтобы равномерно распределялись без дробления вложенных, в первую очередь в первый столбец, а потом уже примерно одинаковое количество во второй и так далее (если указать 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>
|
ozoro,
сколько колонок нужно? |
рони,
в основном 2, а где-то и 3 или 4 необходимо будет... Думал как-то универсально можно сделать... Количество пунктов и вложенных пунктов может быть разное... |
jQuery Column Lists
ozoro,
изменил скрипт и css
<!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{
padding: 0 10px;
border:1px solid #000;
display: flex;}
.column-list{flex: 1;
list-style: none}
</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>Пункт #26</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>Пункт #38</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' ),
$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 : 3,
'class' : 'column-list',
incrementClass : 'column-listxxx-'
});
</script>
</body>
</html>
|
рони,
Круто, то что надо. Благодарю, как всегда помог быстро и четко!!! |
рони, Приветствую!
Решил реализовать вывод в две колонки. В 1-ой колонке - вложенная колонка (которую помог сделать ранее) в один столбец с дочерними элементами h3, ul li и div, может быть еще абзац - p. Во 2-ой колонке - могут быть такие же дочерние элементы. Необходимо, чтобы вывод в обоих колонках дочерних элементов был примерно одинаковый по высоте с определенным максимально допустимой разницей в высоте блоков (ниже в коде - var d = 100). Когда эта разница превышена, то эти колони должны выводиться "width: 100%; display:block", то есть в один столбец. При этом в первой колонке, вложенные ul li должны выводиться в 2 колонки. Если делать дочерние элементы "margin:0" и "padding:0", то работает как надо (вроде бы:) ), но если у дочерних сделать, например, margin-top или bottom отличными от 0, то высоту не получается определить правильно. Помоги, пожалуйста с кодом определения высоты при указанных условиях! Также в коде комментарии есть, где возможно понадобиться какому либо элементу добавлять класс или еще что-то. Заранее, благодарю! Вот тестовый код:
<!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>
.conteiner{max-width: 1300px}
.item-row{display:flex}
.item {
width: 50%;
border: 1px red solid;
display: inline-block;
padding: 10px;
}
.item-row.cs3 {
width: 100%;
/* border: 1px red solid; */
display: block;
padding: 10px;
}
.cs1,.cs2{
outline:1px solid #000;
}
.column-list-js{
padding: 0 10px;
}
.column-list-js.cs4{
display:flex;
}
.column-list{flex: 1;
list-style: none}
.column-list li{ margin-top: 20px}
.action-btn {
padding: 5px;
margin: 40px auto;
border: 2px solid #000;
width: 180px;
text-align: center;
}
.div1 { color:red; font-weight:bold; }
</style>
</head>
<body>
<br>
<div class="div1"> </div>
<br>
<div class="conteiner col-2">
<div class="item-row">
<div class="item">
<div class="cs1">
<h3>Заголовок первого блока</h3>
<ul class="column-list-js">
<li> Пункт #1 Пункт #1 Пункт #1 Пункт #1 </li>
<li>Пункт #2 Пункт #2 Пункт #2</li>
<li>Пункт #3 Пункт #3 Пункт #3 Пункт #3 Пункт #3 Пункт #3</li>
<li>Пункт #4 Пункт #4 Пункт #4 Пункт #4</li>
<li>Пункт #5 Пункт #5 Пункт #5 Пункт #5 Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Пункт #7.1 Пункт #7.1 Пункт #7.1 Пункт #7.1 Пункт #7.1 Пункт #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>
</ul>
<div class="action-btn">
<a class="price" title="" href="">
Посмотреть подробнее
</a>
</div>
</div>
</div>
<div class="item">
<div class="cs2">
<h3>Заголовок второго блока</h3>
<p>Текст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пункта</p>
<p>Текст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пункта</p>
<p>Текст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пункта</p>
<p>Текст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пункта</p>
<p>Текст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пунктаТекст пункта Текст пункта Текст пункта Текст пункта Текст пункта</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
var d = 100, //максимально допустимая разница в высоте блоков
a1 = $(".cs1"),
a2 = $(".cs2"),
a1h = parseInt(a1.innerHeight()),
a2h = parseInt(a2.innerHeight()),
abs = Math.abs(a1h-a2h);
$(".div1").html("Первый блок: " + a1h + "px.<br>Второй блок: " + a2h + "px.");
var sz = 0;
//если нет в DOM ни a1 ни a2 - для других страниц, где нет вывода в две колонки
if(!a1 && !a2){
sz = 2;
// здесь возможно необходимо будет добавить класс или еще что-то какому либо элементу
}
else if (abs>d){
sz = 2;
$(".item-row").addClass("cs3");
$(".column-list-js").addClass("cs4");
// здесь возможно необходимо будет добавить класс или еще что-то какому либо элементу
}
else{
sz = 1;
// здесь возможно необходимо будет добавить класс или еще что-то какому либо элементу
}
console.log(sz);
console.log(a1h);
console.log(a2h);
console.log(abs);
;(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>
|
ozoro,
помочь не могу, с высотой можно попробовать scrollHeight.
var d = 100, //максимально допустимая разница в высоте блоков
a1 = $(".cs1"),
a2 = $(".cs2"),
a1h = parseInt(a1.innerHeight()),
a2h = parseInt(a2.innerHeight()),
a1hs = parseInt(a1[0].scrollHeight),
a2hs = parseInt(a2[0].scrollHeight),
abs = Math.abs(a1hs-a2hs);
$(".div1").html("Первый блок: " + a1h + "px.<br>Второй блок: " + a2h + "px.<br>" + "Первый блок: " + a1hs + "px.<br>Второй блок: " + a2hs + "px.<br>");
|
рони,
Почти ничего не изменилось, только прибавился 1px. было: Первый блок: 652px. Второй блок: 734px. стало: Первый блок: 653px. Второй блок: 735px. Реальная высота блоков: Первый блок: 1234px. Второй блок: 734.717px. Второй блок правильно вычисляется, так как у внутренних элементов нет маржи и отступов. |
| Часовой пояс GMT +3, время: 16:41. |