Адаптивные блоки
17 Sep, 2008Это когда блоки подстраиваются под ваш размер экрана изменяя ширину и положение. Звучит сложно, выглядит естественно. Далее несколько вариантов.
Cтолкнулся в одном из проектов. Было бы обидно оставить добытые знания пылиться бесполезной кипой в мозге. =)
Простой способ
Задать блокам процентную ширину и min-width:- .block{
- float:left;
- min-width:200px;
- max-width:300px;
- width:25%;
- }
Фактически, это означает, что блоки будут резиновыми при ширине экрана от 800 до 1200 пикселей (2004 и 3004).
Плюс javascript
Затем я решил слегка улучшить предыдущий способ, подсчитывая джаваскриптом ширину экрана. Будем просто считать количество колонок (n), которое подходит для ширины экрана, и задавать соответствующую процентную ширину (100/n) для каждого из блоков.Вот такой простой скрипт посчитает нам количество колонок (отрывок):
- cc=Math.floor(document.documentElement.offsetWidth/(230));
// максимальная ширина блока 230 - document.getElementsByTagName('body')[0].className = 'columns' + cc;
// присваиваем нужный класс для body
- .columns1 .block{width:100%} //одна колонка
- .columns2 .block{width:50%} //две колонки
- .columns3 .block{width:33%} //три колонки
- ...
Яндекс вариант, таблицы
В своей выдаче поиска по картинкам, Яндекс использует таблицы. И если страничку посжимать, видно как она подстраивается под ваш экран. Разумеется, я раскопал скрипт создающий этот эффект.Сам код можно посмотреть в действии тут.
Вкратце: скрипт получает все ячейки таблицы в массив, из которого затем создает новую таблицу, с нужным количеством колонок. Старая таблица при этом удаляется.
И, это работает. Пример. Авторство скрипта принадлежит Виталию Харисову.
Google вариант, массив
Только настоящим криптографам под силу расшифровать джаваскрипт на страничке гугла!Потратив пару часов, я понял, что они еще на сервере генерируют джаваскриптовый массив с содержимым ячеек таблицы. И затем просто работают с самим массивом, не трогая DOM. На Яндексе сделано так же, только массив каждый раз при ресайзе окна создаётся заново, что, впрочем, происходит довольно быстро.
Массив выглядит как-то так:
- dyn.Img(
- "http:/.../micro.html","",
- "1UaobYhmShe-WM:",
- "http://.../micro.png","119","117",
- "microformats.org MicroFormats logo",
- "","","337 x 330 - 65k","png","www.andypemberton.com","","",
- "http://tbn0.google.com/images","1",[]
- );
В процессе разборок с кодом google столкнулся с таким вот:
function K(a,c,d,b,e,f,h,k,n,p,M,N,O,P,Q,R,S)
Я нахожу это весьма милым. Хотя это и не писалось руками, а результат сжатия. Все равно мило.
На... flash
Удивительно, но один знакомый гениальный дизайнер, создал флэш-версию этой техники. Она занимает всего пару килобайт, и её оптимизации посвящен целый пост. Людям не любящим flash посвящается. Было бы интересно услышать мнения о производительности примера. Я уже давно убедился, что стереотип чего-то плохого флэш получил незаслуженно. И живой пример красивого адаптивного флэш-сайта.В конце
Ссылки на примеры и похожие техники:- Адаптивная таблица от Yandex (мой пример) и её живой вариант
- Адаптивные флоат-блоки (мой пример), и с джаваскриптом (мой пример)
- Адаптивная таблица от Google
- Switchy McLayout: An Adaptive Layout Technique — техника описанная на alistapart
- Dynamic layouts with adaptive columns — еще один пример адаптивного сайта
- Пример сайта с динамическим лэйаутом и статья об этом
- Красивый сайт на флэш иллюстрирующий эту же идею
За фото спасибо shorpy.com, за текст лично Дугласу Адамсу!
судя по всему таки не сжиматор, ибов функции происходит примерно следующее:function K(a,c,d,b,e,f,h,k,n,p,M,N,O,P,Q,R,S){ var g=new Image;g.q=a;g.p=c;g.e=d;g.c=b; g.d=e;g.b=f;g.i=h;g.h=k;g.k=n;g.o=p;g.j=M; g.m=N;g.g=O;g.f=P;g.l=Q;g.n=R;g.a=S; m[o]=g; var T=D(u); if(o<T||j.shouldShowAllImages)J(o);o++ }Видимо это как раз превращение массива в ДОМ-элемент.Или таки сжиматор? Я не очень опытен в распознавании сжимов =)@Mee P.S.: пардон, я не так понял, конечно это сжатый код, но все равно забавно, я машинально начал искать функцию со всем алфавитом. =)