JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div>

<ul class="columns" data-columns="4">
<li><a href="/catalog/dlya_gostinic_i_otelej">Для гостиниц и отелей</a>
<ul>
<li><a href="/catalog/tekstil_dlya_gostinic">Текстиль для гостиниц</a>
<ul>
<li><a href="/catalog/namatrasniki">Наматрасники</a></li>
<li><a href="/catalog/odeyala">Одеяла</a></li>
<li><a href="/catalog/podushki">Подушки</a></li>
<li><a href="/catalog/prostyni">Простыни</a></li>
<li><a href="/catalog/polotenca1">Полотенца</a></li>
</ul>
</li>
<li><a href="/catalog/xalaty3">Халаты</a></li>
</ul>
</li>
<li><a href="/catalog/matrasy">Матрасы</a>
<ul>
<li><a href="/catalog/vatnye">Ватные</a></li>
<li><a href="/catalog/porolonovye_ppu">Поролоновые (ППУ)</a></li>
</ul>
</li>
<li><a href="/catalog/navolochki">Наволочки</a>
<ul>
<li><a href="/catalog/byaz4">Бязь</a>
<ul>
<li><a href="/catalog/belye1">Белые</a></li>
<li><a href="/catalog/cvetnye1">Цветные</a></li>
</ul>
</li>
<li><a href="/catalog/dekorativnye">Декоративные</a>
<ul>
<li><a href="/catalog/gobelen">Гобелен</a></li>
</ul>
</li>
<li><a href="/catalog/perkal3">Перкаль</a></li>
<li><a href="/catalog/poliester1">Полиэстер</a></li>
<li><a href="/catalog/polulen1">Полулен</a></li>
<li><a href="/catalog/poplin4">Поплин</a></li>
<li><a href="/catalog/satin3">Сатин</a></li>
<li><a href="/catalog/sitec1">Ситец</a></li>
<li><a href="/catalog/strajp_satin2">Страйп-сатин</a></li>
<li><a href="/catalog/trikotazh">Трикотаж</a></li>
</ul>
</li>
<li><a href="/catalog/namatrasniki1">Наматрасники</a>
<ul>
<li><a href="/catalog/namatrasniki_detskie">Наматрасники детские</a></li>
<li><a href="/catalog/namatrasniki_stegannye_na_rezinke">Наматрасники стеганные на резинке</a></li>
<li><a href="/catalog/pvx">ПВХ</a></li>
<li><a href="/catalog/namatrasniki_nepromokaemye">Наматрасники непромокаемые</a>
<ul>
<li><a href="/catalog/akvastop">Акваstop</a></li>
<li><a href="/catalog/muleton">Мулетон</a></li>
</ul>
</li>
<li><a href="/catalog/topper">Топпер</a></li>
</ul>
</li>
<li><a...

CSS

ul {
    float: left;
    position: relative;
    margin-right: 20px;
}

JavaScript

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            console.log(column, el, idx);
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
        updateColumns();
    }

    $(setupColumns);
})(jQuery);