x
 
↑
Апрель
•
6 •

2 •
4 •

•
↓
Николай Герасимов
12 апреля 2012

Необходимо создать галерею, где число картинок меняется в зависимости от ширины браузера. Высота галереи ограничена тремя строками. Возможно ли сделать это только с помощью ЦСС?

Если блоки имеют фиксированную заранее известную высоту, задача решается чистым ЦСС.

Контейнеру блоков задаётся высота (количество строк умноженное на высоту одного блока), а через overflow: hidden отсекается всё лишнее:

.gallery {
  position: relative;
  overflow: hidden;
  height: 348px; /* 116px * 3 */
}
.gallery .item {
  float: left;
  width: 116px;
  height: 116px;
}
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
33
34
35
36
37
38
39
40
41
42
43
44
45

(Изменяйте ширину окна.)


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

Готовя пример, я незаметно для себя написал целый джейквери-плагин:

jquery.responsiveFloats.js


Любой набор блоков превращается в респонсив-галерею вызовом responsiveFloats() на родительском контейнере:

<div class="floats">
  <div class="float">1</div>
  <div class="float">2</div>
  <div class="float">3</div>
  <!-- и т. д. -->
</div>

<script>
  $(function(){
    $('.floats').responsiveFloats();
  });
</script>

В основе плагина — тот же принцип расстановки блоков, что и в lines.js на главной странице Студии Лебедева.
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
33
34
35
36
37
38
39
40
41
42
43
44
45


Чтобы изменить минимальную и максимальную ширину колонок, количество строк и класс блоков, пишите так:

$(function(){
  $('.blocks').responsiveFloats({
    minWidth: 300, // по умолчанию: 200
    maxWidth: 400, // false
    rows: 2, // 3
    itemClass: 'block' // 'float'
  });
});
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
33
34
35
36
37
38
39
40
41
42
43
44
45


Пользуйтесь на здоровье.

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии
Алексей Чикин
12 апреля 2012

На сколько это вообще корректно использовать джаваскрипт в вёрстке?

Не учитывать пользователей без поддержки джаваскрипта вообще или использовать только для добавления особо правильного поведения вёрстки на размер браузер?
Игорь Алексеенко
12 апреля 2012

Можно обойтись и без скриптов, только средствами CSS, если использовать media queries. Только в этом случае получится достаточно большой код, потому что нужно будет описать все промежуточные состояния, автоматизировать этот процесс не получится.

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

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
Сайты для слабовидящих 2 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 •




Недавно всплыло

1 • Невозможно собрать портфолио 1 • 3 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 •