Инструмент, который позволит Вам без всяких проблем отсортировать и выложить в виде кирпичной кладки элементы блока.
Нужно лишь подключить скрипт к странице и указать, где и что нужно расположить упорядоченной колонной.
Абсолютно все стили прописываются в CSS и не требуется указание каких-либо свойств в JS.
…
<script src="/js/brickcols.js"></script>
</body>
</html>console.log(BrickCols);<элемент_1 class="класс_обёртки">
<элемент_2 class="класс_колонны">
<элемент_3 class="класс_сортируемых_блоков" data-priority="приоритет_(число)">
любое содержимое
</элемент_3>
<элемент_3 class="класс_сортируемых_блоков" data-priority="1">
любое содержимое
</элемент_3>
<элемент_3 class="класс_сортируемых_блоков">
любое содержимое
</элемент_3>
…
<элемент_3 class="класс_сортируемых_блоков" data-priority="2">
любое содержимое
</элемент_3>
</элемент_2>
</элемент1><элемент_1 id="идентификатор_обёртки">
…
</элемент1>BrickCols.layout_optimization('.класс_обёртки', '.класс_колонны', '.класс_сортируемых_блоков');BrickCols.layout_optimization('.sorted_table', '.sorted_table__col', '.sorted_table__block', function(){
body = document.querySelector('body').classList.add('m--sorted'),
});.sorted_table{
…
max-height: 25vh; // не позволяю блокам раскрываться более чем на четверть высоты экрана, до завершения сортировки
opacity: 0.5;
…
}
body.m--sorted .sorted_table{ // после сортировки:
…
max-height: 100%;
opacity: 1;
…
}В данном разделе, предлагаю Вам посмотреть на работу скрипта.
Лучше всего протестировать его получится, если Вы попробует поизменять размеры окна браузера и проследить за именениями.
Здесь представленны различные блоки с сортированными элементами. Стоит обращать внимание на заголовки элементов, особенно не те, которые содержат в себе ">>", у данных элементов стоит почитать и их содержимое.
Для сортировки всех представленных демонстрационных "таблиц", использовалась всего одна строчка в JS:
BrickCols.layout_optimization('.sorted_table', '.sorted_table__col', '.sorted_table__block');Другими словами, абсолютно не важно, на сколько схожи сортируемые "таблицы", как сильно отличаются их CSS свойства. Нет разницы вообще, ведь скрипт работает с каждым блоком-таблицей по отдельности.
По этой причине предлагаю использовать class, а не id, чтобы просто указывать один класс для всех сортируемых блоков и всего один раз прописать действие в JS-коде.
>> Без приоритета (2)
У этого блока не задан приоритет по умолчанию. Скрипт умён, чтобы решить эту проблему… Он находит свободный номер и присваивает его элементу. В данном случае, самым близким оказался 2-ой приоритет. Кстати, в структуре html-кода, элемент также рассположен на 2-ой позиции.>> Приоритет 3
Данный блок отличается тем, что он рассположен (в html-структуре) под элементом с 23 приоритетом. Но, так как блок имеет более высокий приоритет, то скрипт его поднимает наверх, как это и должно быть.>> Без приоритета (6)
Данный блок в структуре html рассположен в самом конце. Иначе говоря, до работы скрипта, по отношению к этому элементу был актуален CSS-псевдо-селектор :last-child. Также, у данного элемента изначально отстутствует приоритет. Несмотря на это, скрипт нашёл ему дом - 6 позиция, свободная.Заголовок:
Содержимое:
Приоритет (макс. разница между значениями = 200):
Для того, чтобы добавить новый элемент, можно использовать встроенную функцию add_new()
BrickCols.add_new('селектор_обёртки', 'селектор_колоннки', [['ключ_1', 'действие', 'содержимое, которое будет всталяться'], …], приоритет-число);Разметка выглядит следующим образом:
<элемент_1 class="класс_обёртки">
<элемент_2 class="класс_колонны">
<элемент_3 class="класс_сортируемых_блоков brickcols-template">
<элемент_4 data-bc-t="ключ_1">…</элемент_4>
<элемент_4 data-bc-t="ключ_2">…</элемент_4>
…
</элемент_3>
…
<элемент_3 class="класс_сортируемых_блоков">
любое содержимое
</элемент_3>
</элемент_2>
</элемент1>Название ключам можно задавать любое, кроме 'this', так как оно закреплено для действий с блоком шаблона (которому и присвоен class="brickcols-template")
В качестве действий, доступны значения: html, class, href, src. html - вставит требуемое содиржимое во внутрь. class - задаст класс, равный содержимому. href - содержимое будет выведено в одноимённый атрибут. src - аналогично href, но уже для src. Содержимое, это 2-ой элемент массива в массиве, если начинать счёт с 0 (нуля). (см.пример кода)
Четвёртый параметр функции - приоритет, если необходимо его задать точно. Если же не задавать приоритета, то он будет автоматически добавлен в самую короткую колоннку. При заданном вручную приоритете, нужно снова вызвать функцию сортировки, чтобы блок задял своё положение.
…
BrickCols.add_new(…);
BrickCols.layout_optimization(…);
…Если Вас устраивает, как работают демки на данной странице, то Вы всегда можете просмотреть исходный код js-файла, которой реализует это на ней. Файлик находится там -> здесь.
>> Без приоритета (2)
А это блок неудачник… Я его напечатал самым первым при написании разметки, но он всё равно уступил свою позицию. Теперь он второй. Эх!>> Приоритет 7
Вы не поверите, но в списке элементов данной таблицы, это блок был вторым. Однако, ему не повезло, он родился с 7-ым приоритетом и, как следствие, был опущен скриптом на свою позицию.>> Приоритет 1
Примечательно то, что этот блок находился в самом конце списка элементов таблицы. Ещё интересно, что этот блок - "белая ворона", ибо среди массы блоков без приоритетов, ему он был задан, естествено, равный 1-е. Кстати, в данной таблице есть брат этого блока, он тоже имеет приоритет, только с другим значением.