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

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>
Ответить с цитированием