Грамотное распределение элементов по ширине

В список добавляются элементы-заглушки, чтобы нормальные элементы списка выравнивались с их учётом

by SerGen

HTML

<ul class="List ib justify" data-cols="4">
    <li class="ListItem"></li>
    <li class="ListItem"></li>
    <li class="ListItem"></li>
    <li class="ListItem"></li>
    <li class="ListItem"></li>
    <li class="ListItem"></li>
</ul>

CSS

body {
    margin: 0;
}



.List {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.List.ib.justify {
    text-align: justify;
   *text-justify: newspaper;
}
.List.ib.justify:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.ListItem {
    background-color: red;
    height: 5em;
    margin-bottom: 1em;
    width: 7em;
}
.List.ib .ListItem {
    display: inline-block;
   *display: inline;
   *zoom: 1;
    vertical-align: top;
}
.ListItem.fake {
    background-color: transparent;
    margin-bottom: 0;
}

JavaScript

/*!
 * Грамотное распределение элементов по ширине
 *
 * Проблемы:
 * — для правильного выравнивания в список добавляются элементы-заглушки, которые нужно учитывать при работе с полноценными элементами списка;
 * — если после срабатывания скрипта ширина списка увеличится, элементов-заглушек может не хватить; для предотавращения этого можно применять атрибут `data-cols`, указывая в его значении максимальное количество столбцов
 */

if ($('.List.ib.justify').length > 0) {
    $('.List.ib.justify').each(function(){
        var obj = $(this),
            data = obj.attr('data-cols'),
            cols = Math.round(obj.width()/obj.find('.ListItem').width());
        if (data && data !== "") {
            cols = data;
        }
        for (var i = 0; i < cols-2; i++) {
            obj.append('<li class="ListItem fake"></li> ');
        }
    });
}