x
 
Илья Харитонов
31 января 2013

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



Илья!

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

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

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


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

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

Комментарии

Эдзо Хогусава
31 января 2013

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

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

Виталий Кузнецов
31 января 2013

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

Константин Дубина
31 января 2013

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

Константин Соколов
31 января 2013

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

Артём Сапегин
1 февраля 2013

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

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

Алексей Табрисов
16 октября 2013

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

Чтобы вывести галерею в 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 — количество фотографий (элементов в массиве).


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

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

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

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




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

Как избежать «эффекта Тильды»? 2 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 Давайте соберём в одном посте студии и фрилансеров, которые работают по принципам ФФФ 45 1