Название: Masonry
Автор: Gameer & Sander
CMS: DLE 9.x — 10.x
Описание:
В этой статье расскажу как правильно использовать Masonry, на своем сайте. В этом мне помог Sander.
Что ж такое Masonry? Это javascript библиотека для создания мозаики, или что-то в этом вроде. Он работает за счет размещения элементов в оптимальной позиции, на основе имеющейся вертикального пространства.
И так приступим:
Качаем Masonry. Кидаем скрипт в папку js и подключаем его

<script src="{THEME}/js/masonry.pkgd.min.js"></script>

Открываем файл engine/modules/show.short.php находим:

$db->free( $sql_result );

После вставить:

$tpl->result['content'] = "<div id=\"container\" class=\"js-masonry\" data-masonry-options='{ \"columnWidth\": 200, \"itemSelector\": \".item\" }'>>".$tpl->result['content']."</div>";

Теперь о настройках:
columnWidth: 200 — это ширина блока. Настраиваем под себя.
itemSelector: .item — это класс блока который начинается в short-story.tpl к примеру у меня он такой

и вместо item ставлю block_news
Скачать масонри последней версии можно всегда здесь //masonry.desandro.com/
Установка завершена, настройки сделаны. Больше никаких действий не нужно и css кода писать тоже.
Источник: //igameer.ru/