Адаптивные блоки

17 September, 2008

XHTML/CSS

Это когда блоки подстраиваются под ваш размер экрана изменяя ширину и положение. Звучит сложно, выглядит естественно. Далее несколько вариантов.

Cтолкнулся в одном из проектов. Было бы обидно оставить добытые знания пылиться бесполезной кипой в мозге. =)

Простой способ

Задать блокам процентную ширину и min-width:

  1. .block{
  2. float:left;
  3. min-width:200px;
  4. max-width:300px;
  5. width:25%;
  6. }

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

Фактически, это означает, что блоки будут резиновыми при ширине экрана от 800 до 1200 пикселей (200*4 и 300*4).

Плюс javascript

Затем я решил слегка улучшить предыдущий способ, подсчитывая джаваскриптом ширину экрана.
Будем просто считать количество колонок (n), которое подходит для ширины экрана, и задавать соответствующую процентную ширину (100/n) для каждого из блоков.

Вот такой простой скрипт посчитает нам количество колонок (отрывок):

  1. cc=Math.floor(document.documentElement.offsetWidth/(230));
    // максимальная ширина блока 230
  2. document.getElementsByTagName(‘body’)[0].className = ‘columns’ + cc;
    // присваиваем нужный класс для body

И примерно такой CSS, задаст им нужную ширину:

  1. .columns1 .block{width:100%} //одна колонка
  2. .columns2 .block{width:50%} //две колонки
  3. .columns3 .block{width:33%} //три колонки

Это решение я в итоге и использовал в проекте. Пример.
Но, пока я пришел к нему, я решил понять как это делают Яндекс и Google.

Яндекс вариант, таблицы

В своей выдаче поиска по картинкам, Яндекс использует таблицы. И если страничку посжимать, видно как она подстраивается под ваш экран. Разумеется, я раскопал скрипт создающий этот эффект.

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

И, это работает. Пример. Авторство скрипта принадлежит Виталию Харисову.

Google вариант, массив

Только настоящим криптографам под силу расшифровать джаваскрипт на страничке гугла!

Потратив пару часов, я понял, что они еще на сервере генерируют джаваскриптовый массив с содержимым ячеек таблицы. И затем просто работают с самим массивом, не трогая DOM. На Яндексе сделано так же, только массив каждый раз при ресайзе окна создаётся заново, что, впрочем, происходит довольно быстро.
Массив выглядит как-то так:

  1. dyn.Img(
  2. “http:/…/micro.html”,””,
  3. “1UaobYhmShe-WM:”,
  4. “http://…/micro.png”,”119″,”117″,
  5. “microformats.org MicroFormats logo”,
  6. “”,””,”337 x 330 – 65k”,”png”,”www.andypemberton.com”,””,””,
  7. “http://tbn0.google.com/images”,”1″,[]
  8. );

Google вариант — это быстро, удобно, но не подходит для обычных людей. Вот страничка с их примером.

В процессе разборок с кодом google столкнулся с таким вот:

function K(a,c,d,b,e,f,h,k,n,p,M,N,O,P,Q,R,S)

Я нахожу это весьма милым. Хотя это и не писалось руками, а результат сжатия. Все равно мило.

На… flash

Удивительно, но один знакомый гениальный дизайнер, создал флэш-версию этой техники. Она занимает всего пару килобайт, и её оптимизации посвящен целый пост.
Людям не любящим flash посвящается. Было бы интересно услышать мнения о производительности примера. Я уже давно убедился, что стереотип чего-то плохого флэш получил незаслуженно.
И живой пример красивого адаптивного флэш-сайта.

В конце

Ссылки на примеры и похожие техники:

Если у вас были похожие проблемы, буду рад если поделитесь опытом!

За фото спасибо shorpy.com, за текст лично Дугласу Адамсу!

XHTML/CSS

38 комментариев к “Адаптивные блоки”

tearaway_Tea | 1. 17 September, 2008

Дуже цікава тєма! Я колись, роки три тому, теж робив для своєї галереї флоу лейаут без таблиць. Ось навіть знайшов приклад http://tearaway-tea.com/photos/blood/.

Mee | 2. 17 September, 2008

по поводу unction K(a,c,d,b,e,f,h,k,n,p,M,N,O,P,Q,R,S), и зашифрованного кода, это всего лишь упаковщик и сжиматор :) а в остальном, спасибо за статью, очень интересно :)

akella | 3. 17 September, 2008

@Mee: судя по всему таки не сжиматор, ибо в функции происходит примерно следующее:

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.: пардон, я не так понял, конечно это сжатый код, но все равно забавно, я машинально начал искать функцию со всем алфавитом. =)

Busla | 4. 17 September, 2008

В ie7 пример с javascript работает не сказать, чтобы верно: при некоторых размерах окна отображает пустое пространство справа от n колонок, хотя сверху пишет, что колонок n+1
Увидеть больше чем 4 колонки вообще не получилось – оставляет пустое поле справа, пишет что колонок пять (хотя влезть должно и 6 и больше).

Оффтопик: не то, чтобы я не любил flash…
Но заставка и меню “знакомого гениального дизайнера” на несколько минут поставила в тупик :) Навигация по сайту больше напоминает какой-то древний квест – потыкать всюду мышью – не скрывается ли там активное содержимое.

P.S. зашита от ботов в форме коментария – это же тоже обязательное поле.

akella | 5. 17 September, 2008

Да, это проблемы из-за глюка с округлением у ИЕ, когда два блока шириной 50% почему-то не помещаются в одну строку. Клево, не правда ли? Поправил код немного чтобы даже людям с ИЕ было видно что все ок.

Что касается дизайна, это не пример юзабилити, это сайт-портфолио дизайнера. Вы когда-нибудь ругали Пикассо за то что на его картине непонятно что изображено? =)
И, заметьте, вы не закрыли его сайт, а прошли квест. И вам было интересно.
Ну и… вопрос снят, я так понимаю )

P.S: Я не хочу чтобы на моем блоге оставляли комментарии те, кто не знает что это обязательное поле. :) В число этих людей входят все боты, кстати.

P.P.S.: предвосхищая чьи-нибудь выпады, гениальный он по моему мнению, а не по его. =)

Мир CSS » Про адаптивные блоки | 6. 17 September, 2008

[…] Статья […]

Michael Yakovis | 7. 17 September, 2008

А что мешает для первой техники задавать max-width с большим запасом?

akella | 8. 17 September, 2008

основной задачей было — отсутствие большого неиспользуемого пространства.
Если задать max-width с большим запасом, получается, что на больших экранах будет по 4 блока в строку, и много свободного места.

Я в примере задал именно такие значения (200-300), чтобы их увидели все, у кого разрешение экрана больше 1024 пикселей в ширину (это 98% сейчас).

Vitaly Harisov | 9. 17 September, 2008

Скрипт на Картинках я писал. У Гугла сжиматор, конечно, такой код писать и поддерживать нерентабельно.

akella | 10. 17 September, 2008

У них наверное как и у вас при деплойменте все сжимается и кодируется. =) но все равно забавно.
Мой блог скоро превратится в перечень ваших решений, Виталий =), добавил копирайт.

Vitaly Harisov | 11. 17 September, 2008

:)
Лучше на ты, если не затруднит.

Юрко | 12. 17 September, 2008

Ви геть не тямите у сучасних тенденціях. Які сіесес чи то флеш? Майбутнє за роботичними інтерфейсами, а ваші ніякущі технології подохнуть у канаві забуття!

bumbu | 13. 17 September, 2008

всётаки это полезно читать этот блог – кокраз вот в эти дни работаю над проектом где нужно в зависимости от ширины екрана выводить от 3 до 5 колонок. и вот даже голову не хотел ломать преждевременно – и правельно сделал : )) спасибо!

Genn | 14. 18 September, 2008

bumbu, зря не хотели ломать. За ломанием головы придумывается много не связанных с задачей ходов и решений, которые после всплывают из подсознания и используются при выполнении новых задач. ;)

Максуд | 15. 18 September, 2008

Людям не любящим flash посвящается. Было бы интересно услышать мнения о производительности примера. Я уже давно убедился, что стереотип чего-то плохого флэш получил незаслуженно.

Флэш — прекрасная технология, если применять ее с приложением ума.
А плохую репутацию он получил по следующим причинам:
1) это — презентационная технология, а не вебовская;
2) невозможность отключить назойливую “заставку” на большинстве сайтов или полноценно использовать сайт с отфильтрованным флэшем;
3) проблемы с индексированием поисковиками;
4) размер файла (проблема постепенно уходит в прошлое в связи с отмиранием dial-up).
И многое вдогонку.
В общем, “разработчики” сайтов на флэше сами загнали себя в угол и создали этой технологии соответствующую репутацию.

А в примере я вижу сайт, у которого проиндексирована Гуглом только одна страница и три файла. И ноль в Яндексе. И это находит отражение в его посещаемости. Красота красотой, а сайт — нулевой.

Максуд | 16. 18 September, 2008

И в дополнение:
на Firefox 2 (под Ubuntu 6.06) при изменении размера окна эта хрень повесила систему. Не браузер, а систему!

Genn | 17. 18 September, 2008

Максуд, это не хрень ;) С показом флеша под Линуксами огромная проблема — все еще 32-битные модули для отображения, или как там это называется. Тут уж вопрос к «устойчивой» системе, которую можно повесить из броузера.

В целом, я согласен с вами, кроме, разве что, плохого индексирования. Вы правы, все эти надуманные причины сослужили флешу плохую службу и очень хорошо, что эти стереотипы отмирают. Если Вы говорили о посещаемости моего сайта, то с этим все в порядке — я ловлю почти сто процентов целевой аудитории.

Как пишет Юра: «В конце»

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

Busla | 18. 20 September, 2008

а толку индексировать flash – это же программа. То, что она содержит какие-то строки текста внутри себя, ещё не значит, что их так просто увидеть ;) Особенно, если поисковый запрос из нескольких слов – они все могут присутствовать в коде, но никогда не отображаться одновременно

Игорь | 19. 23 September, 2008

После поста про флеш на «меге», ждал статьи как маны небесной, думал будет CSS-хардкор :(. Не мил мне джаваскрипт, не мил!

Genn | 20. 25 September, 2008

Игорь, у меня javascript вызывает ощущение, что все сейчас развалится. Если описать ощущения более детально, то я представляю его как барак сбитый не самыми хорошими гвоздями, причем где-то торчит кусок доски, а где-то строительный материал заменяет пакет «Спасибо за покупку» или оторванная у куклы голова. Причем барак этот находится на какой-то важной трассе, где ездит много машин и теоретически он крайне полезен, но через два года трассу перенесут на другую планету, а эта дорога зарастет травой. Барак же, покосившись от времени, будет стоять продуваемый ветрами. У головы куклы закатится один глаз, придавая всему этому архитектурному недоразумению совсем уж нездоровый вид.

Websites tagged "alistapart" on Postsaver | 21. 26 September, 2008

[…] – Адаптивные блоки saved by XsasoriXreborn2008-09-24 – A List Apart Survey saved by pantherxc2008-09-24 – Gr8 CSS […]

Владимир | 22. 29 September, 2008

Вот на сайте Лебедева хорошее решение предлагают http://www.artlebedev.ru/tools/technogrette/html/thumbnails/

akella | 23. 29 September, 2008

Я очень уважаю профессионалов из этой студии, но конкретно это решение какое-то странное и отдаленное от моих реалий =) Они решают там совсем другую проблему, с которой мне к сожалению не приходилось сталкиваться за 4 года.

balou | 24. 7 October, 2008

Флэш люди не любят не зря. Ваш пример лишний раз утвердил меня в этом чувстве. Систему он мне не подвесил, но Firefox 3 под XP вылетел трижды (это я три раза вашу страницу открывал для опытов). Так, что хрень – это еще мягко сказано.

anasana | 25. 19 October, 2008

Добавлю гвоздь к комментариям про Flash – у нас на работе проксёй режутся как флеш так и картинки. Так без картинок (как оказалось :) ) + / – жить можно, а, в часности, тот сайт дизайнера мне открывается вообще пустой-пустой :( А если учесть что на работе времени проводится очень много, то с любым флеш-содержащим контентом мы проживаем в совсем разных пространствах…
P.S. За примеры большое спасибо. Буду ломать голову как их можно эффективно к чему-нибудь пристроить. В любом случае это оказалось очень познавательно, а то, действительно, приколы ИЕ вида 50%+50%=две строки всегда так радуют…

Genn | 26. 19 October, 2008

То, что у вас флеш режется не говорит ничего хорошего или плохого об этой технологии. ;)

Big_Shark | 27. 24 October, 2008

а как сделано тут http://euroset.ru/ ?

akella | 28. 24 October, 2008

Там просто задана ширина для блоков, и при сужении экрана они падают вниз. Это самый простой вариант, я же пытался сделать так чтобы блоки еще и тянулись.

ProGuide | 29. 4 November, 2008

Да, действительно заставить блоки тянуться у меня тоже не получалось…вот что чего [url=http://kyrgyz-tours.info/misc/a.html]у меня получилось[/url], может есть что нового для кого-нибудь… :)

ProGuide | 30. 4 November, 2008

Упс…а где BB-теги :)

ProGuide | 31. 5 November, 2008

Вдохновения не было, сегодня решил закончить это дело… :) Вот и результат: Мои адаптивные блоки без использования скриптов и таблиц.
З.Ы. Строго не судите я только начинающий в css…

akella | 32. 6 November, 2008

Отлично получилось =) Зачем же судить, супер!

ProGuide | 33. 7 November, 2008

akella спасибо, но я так и не понял как сделать чтобы на IE6 текст (внизу картинки) тоже растягивался. Получилось что она тоже имеет ширину 20%… :/

Инк | 34. 2 December, 2008

18 сентября | Максуд
Он не систему повесил, а Иксы. Система жила и дальше :)

cssing :: Архив :: CSSing 2008 | 35. 28 February, 2009

[…] Адаптивные блоки — несколько способов адаптировать кол-во отображаемых в строку элементов в зависимости от размера экрана […]

Умные динамические колонки с применением CSS и jQuery » Свобода слова вебмастерского | 36. 29 May, 2009

[…] “Адаптивные блоки” от akella (там же ряд других примеров подобной техники) […]

Programming Blog » Adaptive Css Columns | 37. 4 November, 2009

[…] post about adaptive css columns. Categories: Uncategorized Tags: Comments (0) Trackbacks (0) […]

Antonio | 38. 20 February, 2010

Спасибо, хорошая статья,
автор проделал немалую работу

Оставить комментарий