рони, Приветствую!
Решил реализовать вывод в две колонки.
В 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>