Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2019, 15:37
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

Помогите исправить 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>

Последний раз редактировалось ozoro, 09.10.2019 в 16:05.
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2019, 16:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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 (permalink)  
Старый 09.10.2019, 19:12
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

рони, а если добавить еще пунктов и подпунктов, то что-то не то получается. Надо чтобы равномерно распределялись без дробления вложенных, в первую очередь в первый столбец, а потом уже примерно одинаковое количество во второй и так далее (если указать 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, 09.10.2019 в 19:20.
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2019, 19:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ozoro,
сколько колонок нужно?
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2019, 19:48
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

рони,
в основном 2, а где-то и 3 или 4 необходимо будет... Думал как-то универсально можно сделать... Количество пунктов и вложенных пунктов может быть разное...

Последний раз редактировалось ozoro, 09.10.2019 в 19:51.
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2019, 21:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2019, 21:49
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

рони,
Круто, то что надо. Благодарю, как всегда помог быстро и четко!!!
Ответить с цитированием
  #8 (permalink)  
Старый 23.10.2019, 03:24
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

рони, Приветствую!

Решил реализовать вывод в две колонки.

В 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, 23.10.2019 в 03:29.
Ответить с цитированием
  #9 (permalink)  
Старый 23.10.2019, 08:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>");
Ответить с цитированием
  #10 (permalink)  
Старый 23.10.2019, 13:46
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

рони,
Почти ничего не изменилось, только прибавился 1px.

было:
Первый блок: 652px.
Второй блок: 734px.

стало:
Первый блок: 653px.
Второй блок: 735px.

Реальная высота блоков:
Первый блок: 1234px.
Второй блок: 734.717px.

Второй блок правильно вычисляется, так как у внутренних элементов нет маржи и отступов.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
плагин jquery ajax upload Karabella jQuery 0 06.06.2013 21:25
Плагин jParallax для jQuery britanik jQuery 4 14.02.2010 12:11
syncTranslate jQuery плагин Snowcore Ваши сайты и скрипты 0 20.10.2009 19:00
Плагин для файрфокса - чтение изображений SunnyDay Общие вопросы Javascript 4 28.04.2009 17:30