Как сделать все столбцы div одинаковой высоты автоматически с помощью jQuery

Каждый веб-разработчик когда-нибудь столкнется с удивительной задачей работы со столбцами в макете с различным содержанием. Я имею в виду, что мы всегда видим потрясающие шаблоны, которые мы нашли в фрагментах и ​​демонстрациях в Интернете, и они просто выглядят потрясающе симметрично (но только с тем же содержанием):

Но когда мы используем шаблон и просто помещаем некоторый динамический контент, сгенерированный неким языком на стороне сервера:

Это не выглядит так симметрично, не так ли?

Вы спросите себя, почему бы просто не использовать CSS для этой задачи? Ну, ответ довольно прост: сделать надежные, отзывчивые столбцы одинаковой высоты для произвольного контента сложно или почти невозможно сделать только с помощью CSS (по крайней мере, без хаков или хитрости, с обратной совместимостью, да, мы говорим о вас, IE9) , Эта задача должна быть выполнена с использованием Javascript (или с помощью jQuery), однако обратите внимание, что вы, вероятно, должны убедиться, что ваш макет по-прежнему пригоден для использования пользователем (помните, что это может быть кто-то с отключенным javascript).

Если вы решили сделать небольшой сценарий для достижения того, чего вы хотите, вы можете подумать о чем-то похожем на:

Замечания: не используйте следующий фрагмент, так как он слишком простой, это всего лишь пример объяснения того, как может работать логика.

(function( $ ) {
// the sameHeight functions makes all the selected elements of the same height
$.fn.sameHeight = function() {
var selector = this;
var heights = [];
// Save the heights of every element into an array
selector.each(function(){
var height = $(this).height();
heights.push(height);
});
// Get the biggest height
var maxHeight = Math.max.apply(null, heights);
// Show in the console to verify
console.log(heights,maxHeight);
// Set the maxHeight to every selected element
selector.each(function(){
$(this).height(maxHeight);
});
};
}( jQuery ));

Это должно создать тот же метод HeHight, что и плагин jQuery, поэтому мы можем использовать его следующим образом:

$('.my-selector').sameHeight();
$(window).resize(function(){
// Do it when the window resizes too
$('.my-selector').sameHeight();
});

Но мы не рекомендуем делать это самостоятельно или используя предыдущий фрагмент, создание тестов займет много времени, вместо этого мы рекомендуем использовать для этого библиотеку, как показано в следующей области.

Реализация

Слишком много вещей, о которых нужно заботиться, если вы хотите сделать это самостоятельно, и множество тестов для выполнения, если вы хотите быть уверены, что ваша собственная реализация действительно работает. Не изобретайте колесо и используйте библиотеку, чтобы сделать ее простой, функциональной и правильной. В этом случае мы рекомендуем вам использовать jquery.matchheight для достижения вашей цели. Есть много плагинов jQuery, которые обещают полностью сценарий, чтобы сделать ваши div’ы одинаковыми по высоте в каждом браузере, однако большинство из них терпят неудачу не потому, что пользователь использует старый браузер, но они не реализуют свой алгоритм к элементам при изменении размеров окон, потому что вы используете плавающие элементы в строке или другие виды событий, такие как модификация DOM.

MatchHeight сделает высоту всех выбранных элементов в точности равными, используя простой селектор и функцию инициализации. Вы можете увидеть демо MatchHeight на этой странице или посетите непосредственно хранилище в Github, чтобы получить копия библиотеки. Основными функциями MatchHeight являются:

• это соответствует высотам для групп элементов автоматически.
• используйте максимальную высоту или определите конкретный целевой элемент.
• в любом месте на странице и в любом месте в DOM.
• отзывчивый (обновляет событие изменения размера окна).
• осведомленность о строке (обрабатывает плавающие элементы и перенос).
• аккаунты для box-sizing и смешанный padding, margin, border ценности.
• обрабатывает изображения и другие медиа (обновления после загрузки).
• поддерживает скрытые или невидимые элементы (например, элементы внутри вкладок).
• регулируется производительность и плавность.
• легко удаляется при необходимости.
• сохранить позицию прокрутки.
• API атрибутов данных.
• события обратного вызова.
• протестировано в IE8 +, Chrome, Firefox, Chrome Android.

Чтобы начать, получите копию библиотеки match-height в хранилище Github или добавьте проект в качестве зависимости в NPM:

npm install jquery-match-height

Или с Бауэром:

bower install matchheight

Наконец, включите в документ библиотеку с тегом script (обратите внимание, что jQuery необходимо включить раньше):

И тогда вы сможете использовать библиотеку matchHeight. Вы можете использовать MatchHeight либо с jQuery, либо с помощью API атрибутов данных:

инициализация jQuery

Для нашей разметки мы используем загрузчик:

Article Title
Hello
This has
a different height
Article Title
Hello
This is not what it
looks like
Article Title
Hello
a different height

3 столбца с разной высотой, чтобы сделать их все одинаковой высоты, инициализируйте matchHeight с помощью jQuery (выбирая 3 элемента с классом article):

$(".article").matchHeight();

И вам не нужно беспокоиться о том, что ваши элементы больше имеют такую ​​же высоту, как matchHeight позаботится обо всем автоматически. matchHeight Метод, может получить в качестве первого параметра объект с 4 свойствами:

$(".article").matchHeight({
byRow: true,
property: 'height',
target: null,
remove: false
});

• byRow является true или же false включить обнаружение строк
• property имя свойства CSS, которое нужно установить (например, 'height' или же 'min-height')
• target необязательный элемент для использования вместо элемента с максимальной высотой
• remove является true или же false удалить предыдущие привязки вместо применения новых

API атрибутов данных

Вы можете автоматически инициализировать библиотеку, используя атрибуты данных, например, data-mh="group-name" где group-name — произвольная строка, определяющая, какие элементы следует рассматривать как группу (разновидность идентификатора группы).

Article Title
Hello
This has
a different height
Article Title
Hello
This is not what it
looks like
Article Title
Hello
a different height
Blog Title
Hello
This has
a different height
Blog Title
Hello
This is not what it
looks like
Blog Title
Hello
a different height

Все элементы с одинаковым именем группы будут установлены на одинаковую высоту при загрузке страницы, независимо от их положения в DOM, без необходимости в дополнительном коде.

Обратите внимание, что byRow будет включен при использовании API данных, если вы не хотите этого (или требуете другие опции), тогда используйте альтернативный метод (с jQuery).

При использовании любого из ранее упомянутых методов вы должны увидеть симметричный макет с вашими столбцами, используя jQuery:

Вспомогательные методы

Если вы хотите работать с этой библиотекой и тщательно ее знать, то стоит упомянуть несколько методов:

Триггерное событие обновления

Если вы уже инициализировали matchHeight в элементах, и по какой-то причине вам необходимо обновить метод корректировки, например, если вы изменили какой-либо контент, вы можете сделать это с помощью:

$.fn.matchHeight._update()

События обратного вызова

Поскольку matchHeight автоматически обрабатывает обновление макета после определенных событий окна, вы можете предоставить функции в качестве глобальных обратных вызовов, если вам необходимо получить уведомление:

$.fn.matchHeight._beforeUpdate = function(event, groups) {
// do something before any updates are applied
}
$.fn.matchHeight._afterUpdate = function(event, groups) {
// do something after all updates are applied
}

Если вам нужна дополнительная информация, пожалуйста, посетите расширенное использование в репозитории Github здесь.