Делаем блоки в строке одинаковой высоты

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

Но что делать, если есть блоки выстроены в несколько строк, и нужно увеличить высоту только одной строки?

Что есть и что нужно

Что есть и что нужно


Идея здесь, в основном, та же, измерение высоту всех слоев и установка максимальной, но есть одно отличие — учитывается верхняя позиция слоя. Основываясь на этом, можно сказать к какой строке относятся элементы.
Итак, код:

  1. var currentTallest = 0,
  2.      currentRowStart = 0,
  3.      rowDivs = new Array(),
  4.      $el,
  5.      topPosition = 0;
  6.  
  7.  $('.blocks').each(function() {
  8.  
  9.    $el = $(this);
  10.    topPostion = $el.position().top;
  11.  
  12.    if (currentRowStart != topPostion) {
  13.  
  14.      // Мы перешли на новую строку.  Установим высоту элементам предыдущей строки
  15.      for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
  16.        rowDivs[currentDiv].height(currentTallest);
  17.      }
  18.  
  19.      // устанавливаем значение переменных для новой строки
  20.      rowDivs.length = 0; // очищаем массив
  21.      currentRowStart = topPostion;
  22.      currentTallest = $el.height();
  23.      rowDivs.push($el);
  24.  
  25.    } else {
  26.  
  27.      // Div находится на этой же строке.  Добавляем его высоту в конец массива
  28.      rowDivs.push($el);
  29.      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  30.  
  31.   }
  32.  
  33.   // Для последней строки
  34.    for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
  35.      rowDivs[currentDiv].height(currentTallest);
  36.    }
  37.  
  38.  });

$(‘.blocks’) может быть заменен на любой другой CSS селектор.

Если блоки, ко всему прочему, резиновые по ширине, этот код следует сделать функцией и вызывать каждый раз при ресайзе окна:

  1. $(window).resize(function() {
  2.    equalizeThoseMoFos();
  3. }

Вот так все просто, а главное — красиво.

Оригинал

Запись опубликована в рубрике JS & jQuery с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">