Блоки одинаковой высоты - jquery.matchHeight
matchHeight позволяет все выбранные элементы сделать одинаковой высоты.
Возможности:
- Автоматическое приведение всех выбранных групп элементов к одной высоте
- Можно определить максимальную высоту или высоту конкретно выбранного элемента
- Использование в любом месте страницы и любом DOM
- Responsive (отзывчивый дизайн, обновление при window resize)
- Поддержка скрытых и не видимых элементов (например, внутри табов)
- Оптимальная производительность и качество
- Легко удаляется, если нужно
- Поддержка sroll
- API c атрибутами data
- callback события
- Тестировался на IE8+, Chrome, Firefox, Chrome Android
JS
Для работы подключаем библиотеку jQuery и сам плагин:
<script src="jquery.matchHeight.js" type="text/jаvascript"></script>Инициализируем плагин:
$(function() {
$('.item').matchHeight(options);
});Options - не обязательный параметр.
Значения по умолчанию посмотрим ниже:
{
byRow: true,
property: 'height',
target: null,
remove: false
}Где:
- byRow - true или false включения определения row
- property - название CSS свойства, например 'height' или 'min-height'
- target - не обязательный параметр, используется для выбора элемента по высоте которого выравнивать другие элементы
- remove - true или false, удаление предыдущих "привязок" (bindings) для применения новых.
API
Использование атрибута data-mh="group-name"
Где group-name - произвольное название, для идентификации группы элементов
<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>Все элементы группы будут иметь одинаковую высоты, когда страница загрузится, не зависимо от их положения в DOMе, без использования какого-то дополнительного кода.
Обратите внимание, что byRow будет включен при использовании data атрибутов, если вам нужно выключить этот параметр, то воспользуйтесь альтернативным методом приведенным выше.
За более детальной информацией обращайтесь на github адрес плагина.
