Умные динамические колонки с применением CSS и jQuery
Вольный перевод статьи Smart Columns with CSS & jQuery.
Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”).
Недостатком фиксированных колонок при их использовании в “резиновом” блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ширина меньше ширины столбца:
“Резиновые” же колонки не оставляют избыточных пустого пространства и прекрасно вписываются в родительский блок. Однако их недостаток заключается в том, что в строку мы можем поместить только фиксированное число столбцов:
Решение
Суть решения заключается в том, чтобы взять преимущества обоих ситуаций и объединить их в одно. Что мы должны получить в итоге:
- Блок должен вмещать столько фиксированных колонок, сколько позволяет размер экрана.
- Если в блоке образовалось лишнее свободное пространство, равномерно распределить его на каждую из колонок, чтобы заполнилось все свободное пространство в блоке.
- При растяжении колонок ориентироваться на их базовую ширину и растягивать их до той поры, пока потенциальное свободное пространство не вместит очередную колонку.
Посмотреть пример - Умные динамические колонки.
HTML
Начнем с создания неупорядоченного списка, пункты которого будут вести себя как колонки.
1 2 3 4 5 6 7 8 9 | <ul class="column"> <!-- повторяющийся элемент списка --> <li> <div class="block"> <!-- контент --> </div> </li> <!-- конец повторяющегося элемента --> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | ul.column{ width: 100%; padding: 0; margin: 10px 0; list-style: none; } ul.column li { float: left; width: 200px; /* ширина колонки по умолчанию */ padding: 0; margin: 5px 0; display: inline; } .block { height: 355px; font-size: 1em; margin-right: 10px; /* отступ между колонками */ padding: 20px; background: #e3e1d5; } .block h2 { font-size: 1.8em; } .block img { /* параметры для изображений с меняющимися размерами и бордюром */ width: 89%; /* убираем 1% от ширины, чтобы предотвратить баг в IE6 */ padding: 5%; background:#fff; margin: 0 auto; display: block; -ms-interpolation-mode: bicubic; /* предотвращение пикселизации изображений в IE 6/7 */ } |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function smartColumns() { //функция, подсчитывающая ширину колонок //сброс ширины строки до 100% после изменения размера экрана $("ul.column").css({ 'width' : "100%"}); var colWrap = $("ul.column").width(); //определяем ширину строки var colNum = Math.floor(colWrap / 200); //определяем, сколько столбцов в 200px вместится в строку и округляем число до целого var colFixed = Math.floor(colWrap / colNum); //ширину строки делим на количество столбцов, округляем до целого числа, в результате получаем точную скорректированную ширину колонки $("ul.column").css({ 'width' : colWrap}); //ставим точную ширину строки в пикселях вместо использования % - это предотвратит возможные баги в разных браузерах при различных разрешениях экрана $("ul.column li").css({ 'width' : colFixed}); //ставим точную ширину измененным столбцам } smartColumns(); //запускаем функцию после загрузки страницы $(window).resize(function () { //запускаем функцию после каждого изменения размера экрана smartColumns(); }); |
Ссылки по теме
- Оригинал статьи на английском
- “Адаптивные блоки” от akella (там же ряд других примеров подобной техники)
P.S. Довольно интересная штука. При удобном случае нужно будет обязательно воспользоваться.
Красиво:)
Возмем на заметку.
Еще бы к этому автоматическое подстраивание размера шрифта под разные разрешения, раз уж скрипт используется :)
Да, все хорошее вовремя…
Делал подобное в своем проекте, то там было немного веселее, там такое происходило с таблицей :) это уменьшает вероятность того что во «всемилюбимом» ИЕ распологаться блоки будут хорошо…
Удивлен, что тебе понравилось, ты же не любишь скрипты.
У куда без них, Дима :)
Тенденция однако :)
Но ты подумай, как с размером шрифта при разном разрешении быть.
Еще бы при при уменьшении размеров экрана монитора пропорции соблюдались бы, размер колонки уже - шрифт чуть меньше :)
Т.е. ты хочешь, чтоб шрифт был тем больше, чем больше разрешение экрана и наоборот (в указанных пределах)?
Я предполагаю, что это можно сделать по аналогии с колонками, только для этого нужно знать зависимость, т.е. в какой пропорции делать изменение размера шрифта в зависимости от размера экрана.
<blockquoteТ.е. ты хочешь, чтоб шрифт…
Да, именно так, чтобы все было автоматом.
Понятно, что задача не простая и может быть однозначного решения не имеет, но лично не отказался бы от такой фишки :)
В общем, я понял. Сейчас сделал, так сказать, набросок, уже кое-что получилось. Так что это вполне реально реализовать.
Давай, давай :)
Тоже озадачился этой проблемой, так сказать пролог “Контроль”, примеры там есть, но это только про подгонку размеров макета при разных разрешениях, до размеров шрифта, еще не созрел :)
Получилось - http://dimox.name/fontsize.html. С кроссбраузерностью проблем нет.
В самом скрипте есть 2 настройки:
2
var fontSize = 12; // минимальный размер шрифта
1000 - это та же ширина, что и усновного родительского блока (#wrapper).
Кроме тега body, у всех тегов нужно использовать em вместо px (там, где ты хочешь динамически менять размер шрифта).
Пожалуй, уже можно писать статью на эту тему =)
Круто :)
Пиши статью, но лучше, если за основу макет возьмешь стандартный трех колоночный.
Пусть там и ширина колонок меняется и размер шрифта.
И в пошаговом режиме объяснялка, что, как и куда.
Цены тогда ей не будет :)
Всех к тебе засылать буду, для прочтения :)
Может, я чего проглядел, но ИМХО, вместо jQuery можно было бы обойтись ведением min-width.
А шЫштой осел — да забудем уже про него:-)
А внимательнее пост прочитать?
Речь-то совсем о другом :)
Дима, кинул тебе на мыло, свою новую разработку,
к ней поможешь свое хозяйство прикрутить?
Да, вроде, мысль понятна.
Покажите тогда на примере, как то же самое будет решено на чистом CSS.
Не понимаю, каким образом может пригодиться в трехколоночком макете техника динамических колонок. Именно в таком макете достаточно указания %-й ширины, ведь количечество столбцов в строку всегда будет одинаковое.
А изменение размера шрифта к такому макету можно прикрутить.
Посидел, покрутил, и понял, что при расширении контентной части без скриптов никуда.
Нет, конечно, переноса колонок делать не надо :)
Но динамика измения ширины колонок и одновременно размера шрифта нужна.
Важны пропорции не только в ширине колонок , но и в расстоянии между ними.
Приблизительно так, как в посланном тебе на мыло, моем макете,
не важно, что там фиксированная колонка, в принципе все может прокручиваться.
Причем, вместе с min/max-width всему макету.
Пусть ширина колонок в %.
Как пропорциональное именине размера шрифта к этому привязать?
смотрел в konqueror при определенной ширине браузера, начинается “слайд шоу”!!!
ширина около 1200-1300, точно сказать не могу, ибо ФФ еще не ставил!
Спасибо, Дима за помощь.
Все получил.
Играюсь :)
Если будут вопросы то задам, ты же автор данной фишки.
Пиши статью, от себя обязательно линк дам,
думаю многим пригодится.
Пожалуйста. Статью напишу.
К тому, что ты сделал для меня, по моей просьбе,
надо бы добавить из оригинального примера возможность масштабирования картинок, тогда полный фен-шуй будет :)
И, как писал, рассмотреть все на конкретном примере - стандартной трех колоночной разметке, во всех подробностях.
Может даже и не на одну статью потянет :)
В примере из статьи масштабирование изображений работает на голом CSS, так что скриптов для этого не нужно.
C некоторыми оговорками (последняя строка ячеек всегда будет по горизонтальному центру, сколько бы их в строке не было) - можно:
Для
, для списков - display:inline-block; без обтекания + хаки для IE и младших лисиц.
FF3 Win7RC1
Скрипт, боюсь, не выполняет свою функцию.
Opera10 Wnin7RC1 - нормально.
Прошу прощения - деза)
В примере не выполняется, но к кастому моему вполне прикрутилось. о_О
Мистика.
Спасибо, очень интересный пример! Интересно и увлекательно разобран по полочкам. Что-то в этом роде я придумал на div, а на списках не догадался. Не додумался и картинкам назначать ширину width: 89% - клёво!
Но вот вопрос: я решил этот пример использовать для фотоальбома, в котором фоты наложены “внавал”, резиново. Но к каждой фотке хотелось бы вставить комменты.
Если размеры и ориентация, а также объем комментов строго одинаков, то все идет пучком: при изменении разрешения экрана, размера окна браузера все резиновое и “резинит” отлично.
Но в реале фотки имеют разный размер и ориентацию, разный объем текста и колонки получаются разной высоты. И вот тут получается неприятный фикус-покус: маленькие колонки цепляются за высокий правый край бОльших колонок, находящихся раньше - получаются зияющие пустоты. Как их избежать - ума не приложу.
Может честной изобретательный и остроумный народ подскажет что-то оч.ценное? Или такая идея неважнецкая?
К сожалению, указанная вами ссылка не работает сейчас.
Не могли бы вы воскресить эту страницу?
Заранее спасибо.