Колонки одинаковой высоты - лучшее решение на JavaScript

Колонки одинаковой высоты - лучшее решение на JavaScript

Колонки одинаковой высоты - лучшее решение на JavaScript

» » Сообщение:

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

Рассмотрим пример. В родительском блоке с ограниченной шириной (скажем 1000px) расположен дюжину блоков шириной в 250px, которым задан float:left. Задайте им разную высоту и вы увидите, что они ложатся настолько криво, насколько это возможно. Что нужно? Одинаковая высота колонок.

Для задания одинаковой высоты, в некоторых (скорее редких) случаях подойдёт просто min-height, но он не является панацеей. Нужен скрипт, который бы выделил самый высокий блок в коде и задал бы остальным блокам ту же высоту. Замечательно, и таких примеров хватает, НО!

Есть одно громадное НО. Допустим все колонки получаются в высоту 100px, а лишь одна в 300px. Несложно догадаться, что все колонки будут в 300px и будут строки с большим отступом до следующей строки. И выглядеть это будет очень гумозно. Что же нужно?

ЦЕЛЬ: скрипт, который обрабатывает массив контейнеров следующим образом – смотрит сколько получается строк, какой блок в каждой строке самый высокий и подгоняет остальные блоки в строке под максимальную высоту блока для этой строки.


задать нескольким колонкам одинаковую высоту

Недавно один умный мужик, Стивен Акинс, опубликовал у себя в блоге статью, где предлагает рабочий скрипт на jQuery, который справляется с задачей на ура.

Идея работы скрипта проста: учитывается позиция контейнера от вершины страницы, в следствие чего распознаётся какой контейнер в какой строке расположен.

Сильно не изменял, добавил лишь возможность прописать идентификатор/класс объектов, к которым применять скрипт.

Использование. Подключить jQuery, подключить файл скрипта, активировать скрипт на странице. Последний шаг представлен чуть ниже.

Код: Выделить всё Развернуть
$(function() {
    columnConform('#page-wrap > div');
});
$(window).resize(function() {
    columnConform('#page-wrap > div');
});

Первые три строки исправляют высоту блоков, а последние три строки отвечают за то, что если будет производиться ресайз окна браузера, то высоты пересчитаются вновь. Если дизайн не резиновый, то последние три строки можно спокойно убрать.

Ссылка на пример

© shublog.ru

колонки одинаковой высоты - лучшее решение на javascript



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0649JavaScript. Логические операторы и ...
Сообщение от: Admin
078Вывод страницы на печать, версия дл...
Сообщение от: likbezz
151432Re: Рейтинг материалов +/- (плюс/ми...
Сообщение от: kinouser
21407Re: Закладки пользователя для сайта...
Сообщение от: Admin
0847Javascript Math.random(), аналог PH...
Сообщение от: Admin