Столбцы равной высоты с JQuery

Question

Можем ли мы использовать JQuery для создания столбцов одинаковой высоты? Если да, то как?

Спасибо

Answer 1

Прокрутите каждую колонку и найдите самое высокое.Затем установите все на эту высоту.

var maxHeight = 0;
$(".column").each(function(){
  maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);​

Онлайн-демонстрация: http://jsbin.com/afupe/2/edit

Answer 2

Настоятельно рекомендуем использовать подключаемый модуль. Как это кричит многоразовость. Вы можете сделать равные высоты специфичными для коллекции ...

$.fn.equalHeights = function () {
  var max = 0;
  return this
    .each(function(){
      var height = $(this).height();
      max = height > max ? height : max;
    })
    .height(max);
};
// don't combine collections unless you want everything same height..
$('.top-menu a').equalHeight();
$('footer a').equalHeight();

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

$.fn.equalProp = function (prop) {
  var max = 0;
  return this
    .each(function(){
      var oProp = $(this)[prop]();
      max = oProp > max ? oProp : max;
    })
    [prop](max);
};

$('.top-menu a, .top-menu div').equalProp('height').equalProp('width');

Answer 3

@ ktsixit вы должны дать Класс для всех ваших столбцов вместо использования уникальных идентификаторов в этом случае. Затем вы можете рассчитать и применить самую высокую высоту ко всем элементам одновременно. Даже если вы не используете или не можете использовать класс, вы должны по крайней мере использовать переменные для хранения ссылок на идентификаторы div. С кодом выше вы анализируете DOM 6 раз. Вы можете по крайней мере уменьшить это до 3 разборов, используя переменные.

Answer 4

Я отправил похожий вопрос несколько дней назад, и вот фрагмент кода, который работал для меня.

*** #column_left, #column_center, #column_right: три столбца div, которые должны иметь одинаковую высоту. Я полагаю, он может работать с большим или меньшим количеством столбцов.

<script type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script type='text/javascript'>
$(document).ready(function() {

    // get the heights
    l = $('#column_left').height();
    r = $('#column_right').height();
    c = $('#column_center').height();

    // get maximum heights of all columns
    h = Math.max(c, Math.max(l, r));

    // apply it
    $('#column_left').height(h);
    $('#column_right').height(h);
    $('#column_center').height(h);
    });
</script>

Опубликовано пользователем "widyakumara". Надеюсь, вам это тоже поможет.