2 способа создания колонок одинаковой высоты: при помощи jQuery и на чистом JavaScript

Комментарии — 12

• Илья 2 Янв 2015 

  Код javascript может быть после всех колонок, самое распространённое и простое решение - сделать его перед закрывающим тегом , но можно подключить его и в шапке, если обернуть в window.onload = function() { ... } - чтобы срабатывало только при полной загрузке содержимого окна.
• Иван 25 Май 2015 

  $(document).ready(function(){
  		function maxh(colums){
  			colums.height(Math.max(colums.height()));
  		};
  		maxh($(".main div"));	
  });

  А так не красивее?
  • Кирилл 20 Авг 2015 

    А если нужно пару рядов? и текст везде разный?
    • Иван 28 Окт 2015 

      тут вообще без разницы сколько колонок
• Андрей 11 Окт 2015 

  Вот мне как раз надо реализовать трехколоночный макет с адаптивным дизайном:

        <div class="container">
              <div class="column green"></div>
              <div class="column red"></div>
              <div class="column blue"></div>
          </div>

  .column
  {
    float: left;
    width: 33.333333333333333333333%;
  }

  Но я наверное чего-то недопонимаю.
  Значит, подключаю плагин, вроде все ничего, колонки одинаковой высоты (судить можно по цвету фона).... Но как только сужаю окно браузера, то контент уезжает вниз за пределы блока.

  Кто что скажет?
  • Миша 12 Окт 2015 

    Андрей, во первых я бы рекомендовал сделать такие соотношения: 33%, 34%, 33%. А то что у вас за три в периоде.
• Сергей 28 Окт 2015 

  Добрый день, Миша!
  Вот нашел у Вас на сайте заметку. И хочу вставить свои "пять копеек" по поводу высказывания
  "... (на CSS такое реализовать не получится)."

  Недавно шастая про необъятным просторам, наткнулся на статью от 2009 года.

  "Две float-колонки одинаковой высоты"

  http://chikuyonok.ru/2009/06/float-columns/

  .
  не сочтите за спам или рекламу, т. к. к автору ни какого отношения не имею.
  И решение ведь хорошее и на чистом CSS (ну оно и понятно, в те годы приходилось изворачиваться, кто как мог.)

  И Вам спасибо за труды, очень помогли.
  • Миша 28 Окт 2015 

    Добрый день!)
    Спасибо за дополнение.
• Denis 13 Ноя 2015 

  Может кому-то пригодится.
  У меня была проблема с определением высоты из-за загрузки картинок.
  Страница сначала подгружала структуру, скрипт определял высоту и только потом подгружались картинки, что обрезало колонку.
  Выход - обернуть скрипт в $(window).load(function () {...}

  jQuery( document ).ready(function($){
  	$(window).load(function () {
  	var max_col_height = 0; // максимальная высота, первоначально 0
  	$('.item').each(function(){ // цикл "для каждой из колонок"
  		if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
  			max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
  		}
  	});
  	$('.item').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
  	});
  });
  • Сергей 13 Ноя 2015 

    А разве

    jQuery( document ).load(....)

    не подойдет?

    вот как бы цитата с

    http://jquery.page2page.ru

    "С помощью стандартных средств javascript, вы можете обработать событие готовности страницы — onload. Однако, оно будет вызвано только после того, как будет сформирована абсолютно вся страница, в том числе, когда будут загружены все картинки и другие мультимедийные элементы. В то время как событие ready происходит в момент готовности дерева DOM, что происходит раньше начала загрузки "тяжелых" мультимедийных файлов. Это оптимальный момент, когда можно приступить к установке обработчиков различных событий и выполнять другой подготовительный javascript-код."
    • Denis 13 Ноя 2015 

      На моём сайте такой вариант не заработал. ;)
      • Миша 13 Ноя 2015 

        Кстати с подгрузкой картинок это вообще отдельный разговор. Если masonry будете использовать, то ещё намучаетесь. Советую глянуть скрипт imagesLoaded.

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.