TJ Gallery

С начала этого года потихоньку продолжил работу над одним старым проектом. Планируется весьма масштабные изменения, как с точки зрения функционала, так и визуализации.
Чтобы обеспечить приятный внешний вид выводимых изображений на страницах, нужно было реализовать сетку, где изображения выровнены по высоте и строки были бы выровнены по краям.

Идея алгоритма была позаимствована у Алексей @Squier и его статьи "Красивый вывод изображений".

На мой взгляд, решение данной задачи на стороне сервера не совсем правильно, особенно если речь идет о современном адаптивном сайте.

Поэтому для решения этой задачи напсал небольшой плагин для jQuery.

Демо1 Демо2 Скачать

Плагин выравнивает изображения по высоте и по ширине выводимой строке, в результате получается вывод изображений, как на google (или yandex) картинках.
Да, хочу отметить, что плагин разработан для адаптивных (responsive) сайтов и автоматически перестраивает сетку при изменении размеров окна браузера.

Это пока что первая версия, буду рад услышать замечания и пожелания и постараюсь их учесь в будущих версиях.

UPD 15.12.2019: Поправлены проблемы с последним элементом в мобильной (и не только) версии, а также некоторые отступы, которые также были сильно заметны на мобильных

Installation

Подключите jQuery и сам плагин jquery-tjgallery.min.js

<script src="js/jquery.min.js"></script>
<script src="js/jquery-tjgallery.min.js"></script>

HTML

<div class="pictures">
    <img src="images/i_1.jpg" alt="" />
    <img src="images/i_2.jpg" alt="" />
    <img src="images/i_3.jpg" alt="" />
    <img src="images/i_4.jpg" alt="" />
    <img src="images/i_5.jpg" alt="" />
    <img src="images/i_6.jpg" alt="" />
    <img src="images/i_7.jpg" alt="" />
    <img src="images/i_8.jpg" alt="" />
    <img src="images/i_9.jpg" alt="" />
    <img src="images/i_10.jpg" alt="" />
</div>

JS

$(document).ready(function(){
    /* Ждем пока картинки загрузятся */
    $(window).load(function(){
        $('.pictures').tjGallery();
    })
});

Options

selector
type: string
Default: 'img'

Селектор блоков для выравнивания


row_min_height
type: integer
Default: 180

Минимальная высота строки


margin
type: integer
Default: 5

Отступ между элементами

Methods

Методов совсем немного, помимо инициализации присутстует вспомогательный метод

clear
который очищает сетку и

destroy
который уничтожает сетку. Причем в большинстве случаев следует использовать именно его.

Демо1 Демо2 Скачать