EXAMPLE: tags list auto width

by Maksim Kachurin

HTML

<h2>
  Было:
</h2>

<div class="tag_cloud_holder_nope">
    <button class="button small_button orange_button">Для новичков</button>
    <button class="button small_button orange_button">Марафон</button>
    <button class="button small_button orange_button">Травмы</button>
    <button class="button small_button orange_button">IronMan</button>
    <button class="button small_button orange_button">Гаджеты</button>
    <button class="button small_button orange_button">Питание</button>
    <button class="button small_button orange_button">Экипировка</button>
    <button class="button small_button orange_button">Веб-сервисы и приложения</button>
    <button class="button small_button orange_button">Еп</button>
    <button class="button small_button orange_button">Экипировка</button>
    <button class="button small_button orange_button">Экипировка</button>
</div>
<hr />
<h2>
  Стало:
</h2>
<div class="tag_cloud_holder">
    <button class="button small_button orange_button">Для новичков</button>
    <button class="button small_button orange_button">Марафон</button>
    <button class="button small_button orange_button">Травмы</button>
    <button class="button small_button orange_button">IronMan</button>
    <button class="button small_button orange_button">Гаджеты</button>
    <button class="button small_button orange_button">Питание</button>
    <button class="button small_button orange_button">Экипировка</button>
    <button class="button small_button orange_button">Веб-сервисы и приложения</button>
    <button class="button small_button orange_button">Еп</button>
    <button class="button small_button orange_button">Экипировка</button>
    <button class="button small_button orange_button">Экипировка</button>
</div>

CSS

h2 {
  font-family: sans-serif;
  font-weight: 400;
}

.tag_cloud_holder,
.tag_cloud_holder_nope {
  max-width: 400px;  
}

.tag_cloud_holder {
    text-align: justify;
    line-height: 0;
    font-size: 1px;
    zoom: 1;
    margin: 0;
    width: 100%;
}
.tag_cloud_holder:after {
    width: 100%;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    content:'';
    display: inline-block;
}
button {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 0px 10px;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 2px;
    outline: none !important;
    text-align: center;
    max-width: 100%;
    padding: 0 5%;
    background-color: #f36c21 !important;
    color: #fff;
}
.small_button {
    font-size: 0.875rem;
    line-height: 2rem;
    font-weight: 200;
}

JavaScript

(function tagCloud() {
    var container = $('.tag_cloud_holder'),
        container_w = 0,
        item = $('button', container);

    $(item).data('timer', setInterval(function () {
        if (container_w != $(container).innerWidth()) {
            container_w = $(container).innerWidth();
            resizer();
        }
    }, 50));

    function resizer() {
        var temp = {};
        $(item).attr('style', '');
        $(item).each(function () {
            temp[this.offsetTop] = temp[this.offsetTop] || [];
            temp[this.offsetTop].push(this);
        });
        
        for (var str in temp) {
            var items = temp[str],
                length = items.length,
                items_w = 0,
                plus;

            // считаем суммарную ширину всех элементов в строке
            for (var i = 0; i < items.length; i++) {
                items_w += $(items[i]).outerWidth();
            }
            // делим разницу между шириной контейнера и суммарной шириной элементов строки, на количество элементов
            plus = (container_w - items_w) / length;
            // это фикс, если ячейки прыгают на следующую строку, попробуйте увеличить множитель
            // каждому элементу прибавляем то что получили раньше, и переводим в проценты
            for (var i = 0; i < items.length; i++) {
                var new_width = ($(items[i]).outerWidth() + plus) / container_w * 100;

                if (new_width < 99) new_width -= 2;
                else new_width = 100;

                $(items[i]).css('width', new_width + '%');
            }
        }
    }

})();