При верстке дивами частенько одной из задач является добиться одинаковой высоты блоков (колонок). Метод основывается на измерении высоты самого высокого блока и присваивание этой высоты остальным блокам.

Код довольно прост, смотрим:

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 // Пролистываем все блоки с классом .blocks
 $('.blocks').each(function() {

   $el = $(this);
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {

     // Высчитываем максимальную высоту
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }

     rowDivs.length = 0;
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);

   } else {

     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

  }

  // Устанавливаем одинаковую высоту всем блокам
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }

 });

Это перевод статьи на css-tricks.

(4 votes, average: 5,00 из 5)

 Loading ...