Школа
Веб-разработка

Как реализовать вёрстку блоков с разной высотой?

Как реализовать вёрстку блоков с разной высотой, как на «Пинми»?

Илья Харитонов
30 янв 2013
👁 2969   🗩6
Веб-разработка

Как реализовать вёрстку блоков с разной высотой?

Как реализовать вёрстку блоков с разной высотой, как на «Пинми»?

Илья Харитонов
30 янв 2013
👁 2969   🗩6
Коля Митин
Разработчик
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Илья!

В ХТМЛ и ЦСС ещё нет простого способа расположить элементы именно так. Поэтому на всех сайтах с «плиткой» блоки расставляются Яваскриптом. Элементы позиционируются абсолютно, с учётом ширины, высоты и расстояния между ними.

Чтобы не заморачиваться с математикой, я рекомендую использовать плагин для Джиквери «Масонство». Он делает «каменную кладку» многими способами, и даже меняет направление гравитации.

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


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

Веб‑разработка
Полезно
  
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Кроме «Масонства» есть jQuery.Shapeshift (http://mcpants.github.com/jquery.shapeshift/)

Делает практически то же самое, только заточен больше под «отзывчивые» макеты и взаимодействие (расстановку плиток перетаскиванием и через тач‑события).

Использую Masonry. Но есть нюансы при работе с Knockout, надо следить за обновлениями и статусами объектов при обновлении.

Есть ещё «Изотоп» (http://isotope.metafizzy.co/)
Как показала практика, он удобнее, быстрее, и в нём есть фильтры и сортировки.
На Айосе «Изотоп» работает надёжнее и быстрее, чем «Мэйсонри».

Практическое, подробнейшее руководство, как такое делается (как раз, используя «Масонство»):
http://www.script-tutorials.com/…/pinterest‑like‑script‑step‑1
http://www.coolwebmasters.com/…/3562‑pinterest‑like‑script‑step‑1.html (http://www.coolwebmasters.com/…‑like‑script‑step‑1.html)  — по‑русски

Мне нужно было показывать только картинки и не нужно было, чтобы всё летало по экрану, поэтому я сделал совсем простой, но очень быстрый скрипт: http://sapegin.github.com/jquery.mosaicflow/

Он не использует абсолютное позиционирование.

Есть такой способ — на ХТМЛ и ЦСС.

Чтобы вывести галерею в N колонок, картинкам задаются свойства display: inline‑block и width: 100%, а диву‑родителю — column‑count: N и, по желанию, column‑gap: 20px.
Значение свойства N уместно менять @media‑условиями.

Способ работает во всех браузерах, начиная с ИЕ9.
Для остальных — фолбэк в виде упомянутого выше «Масонства».

Для сохранения порядка отображения фотографий, ХТМЛ на сервере формируется особым образом:

<div class="parent">
   {for $i=0; $i<N; $i++}
        {for $j = $i; $j <$M;  $j+=N}
                <img src="{$gallery[$j].src}"/>
…, где N — количество колонок, а M — количество фотографий (элементов в массиве).
Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы