Содержание
- 01. Установка масонства
- 02. Проблемы с изображениями
- 03. Идеи для продвинутых пользователей
- 04. Проблемы с использованием на предприятии.
- 05. Отладка масонства
- 06. Заключение
- Необходимые знания: Базовый HTML, CSS и JavaScript / jQuery
- Требует: Текстовый редактор, современный браузер
- Время проекта: 1 час
- Файл поддержки 1
Эта статья впервые появилась в 229 номере журнала .net.
Взрыв Pinterest получил высокую оценку его дизайна и пользовательского опыта. Но если вы не жили в пещере последние два года, вы, вероятно, видели подобную концепцию на многих небольших сайтах, таких как сайты портфолио и аккаунты Tumblr. Это стало возможным благодаря Masonry, плагину динамической компоновки сетки для jQuery - Pinterest создал для этого специальный скрипт, но концепция идентична Masonry. Дэвид ДеСандро, создатель Masonry, описывает его как «обратную сторону CSS-поплавков». В традиционных CSS-поплавках объекты располагаются горизонтально, а затем вертикально. Кладка меняет это положение и может оптимизировать доступное пространство в сетке.
Кладка измеряет все предметы, которые вы обслуживаете, и переставляет их наилучшим образом с учетом того, что доступно в пространстве. Это решение особенно хорошо работает с содержимым на основе изображений, создавая практически бесшовную стену из изображений, соединенных вместе. Без Masonry подобный дизайн был бы практически невозможен, но плагин делает его достижимым всего в нескольких строках JavaScript.
01. Установка масонства
Прежде чем вы начнете, вам потребуется базовая настройка HTML, CSS и JavaScript. Я включил упрощенную версию из HTML5 Boilerplate. в demo.html файла, я добавил 10 различных элементов, которые я хочу разместить в Masonry. Каждый из этих элементов имеет класс пункт и просто содержит изображение. Наш style.css файл объявляет основные стили для этих элементов, делая их 300 пикселей широкий, дисплей блокировать, плавать оставил и иметь верхнее и правое поле 20 пикселей.
Давайте посмотрим, как это выглядит до применения масонства. В ваших демонстрационных файлах закомментируйте script.js внизу demo.html файл для макета без масонства. Вы заметите непоследовательный интервал между изображениями по вертикали: более высокие изображения в ряду создадут промежуток под другими элементами, что сделает ваш макет неряшливым. Если у вас нет определенного обрезанного размера для всех элементов или статического контента, которые вы контролируете, решение, отображающее диапазон контента единообразно, может быть непростым. Здесь сияет кладка, оптимизируя макет вашего динамического контента на лету.
Мы готовы применить масонство, раскомментируйте script.js. Создать $ (документ). готовы() функцию и вызовите функцию Masonry в нашем контейнере содержимого.
$ (документ) .ready (функция () {
$ (’# Content’). Masonry ({
columnWidth: 320,
itemSelector: ’.item’
}). imagesLoaded (function () {
$ (’# Content’). Masonry (’reload’);
});
});
Есть несколько вариантов кладки, но это два основных. ширина колонки указывает минимальную ширину для каждого столбца. При этом учитываются отступы и поля, поэтому 320 для изображения шириной 300 пикселей плюс 20 пикселей правого поля. itemSelector задает селектор CSS для всех элементов, на которые будет влиять Masonry. Мы также обращаемся к плагину, поставляемому с Masonry, который называется imagesLoaded это говорит масонству перезагрузить - но мы вернемся к этому позже.
Теперь посмотрим на результат; очень важно понять, как это достигается. Теперь мы видим, что наш контейнер Masonry, #содержание, получил класс .каменная кладка и задается относительное положение и жестко заданная высота в пикселях. Это позволяет позиционировать каждый элемент или кирпич абсолютно с точным верхним и левым измерением в зависимости от ширины и высоты кирпича.
02. Проблемы с изображениями
Одна из наиболее распространенных проблем масонства - это наложение элементов, особенно изображений, друг на друга. Кладка работает путем измерения каждого доступного кирпича и совмещает каждый кирпич на основе этих измерений. Проблема в том, что когда Masonry измеряет элементы, изображения могут не загружаться, поэтому Masonry будет измерять кирпич без размеров изображения. Это означает, что вместо полной высоты (или ширины) изображения оно будет занимать только одну строку.
Есть разные способы преодолеть это; у каждого есть свои плюсы и минусы. Наиболее распространенное решение - дождаться загрузки всех изображений браузером и затем инициализировать Masonry. Вы можете сделать это, используя $ (окно) .load () вместо $ (документ) .ready () чтобы начать свой код. Хотя это дает желаемый результат для Masonry, вы заставляете пользователя ждать, пока ему представят макет. Он также покажет краткий момент вашего макета без масонства, прежде чем он будет вставлен на место. Наконец, это решение отделяет ваш код масонства от остальной части вашего JavaScript, что отделяет вашу логику и может стать беспорядочным, если другие части вашего кода полагаются на то, что масонство инициируется в первую очередь (например, бесконечная прокрутка).
Более надежное решение - записывать ширину и высоту каждого элемента изображения в разметке. Имея эти значения в разметке, Masonry будет правильно их измерять, и ему не нужно ждать загрузки изображения, чтобы определить его размер. Одним из основных недостатков этого является то, что для этого требуется, чтобы каждое измерение было доступно и сохранено в вашей базе данных, что не всегда возможно.
Поскольку эта проблема широко распространена, Masonry поставляется с imagesLoaded, плагин, который, да, сообщает вам, когда ваши изображения загружены. imagesLoaded имеет функцию обратного вызова, которая выполняется после загрузки всех изображений, что является идеальным местом для инициализации Masonry. Я считаю наиболее универсальным вариантом вызова масонства. document.ready и повторное измерение после загрузки изображений. Для этого вам понадобится Masonry’s перезагрузить метод. Я предпочитаю это, потому что это позволяет вам хранить вашу логику в одном месте и заставляет повторно измерять, когда изображения готовы.
03. Идеи для продвинутых пользователей
Поздравляем, вы настроили свой макет Masonry, но это лишь царапина на поверхности того, что может Masonry. После настройки исходного экземпляра Masonry вы можете изменить его с помощью методов подключаемого модуля. Это дополнительные функции, встроенные в Masonry, чтобы помочь ему делать именно то, что вы хотите, например, добавлять и удалять элементы, повторно измерять размеры кирпичей и многое другое. У вас также есть возможности для анимации контента, добавления новых блоков - даже поддержка RTL. В нашем примере создадим анимированную гибкую ширину. Измените ширину #содержание в auto и margin-left и margin-right от авто в style.css.
#содержание {
маржа: 0 авто;
ширина: авто;
}
Нам также нужно установить isFitWidth в соответствии с нашей настройкой масонства в script.js. isFitWidth - это опция в Masonry, позволяющая определить максимальное количество столбцов, возможное для текущей ширины браузера. Это очень полезно для центрирования контента без неудобных пробелов; без него кладка будет удерживать оставшееся пространство, ширина которого меньше ширины колонны, а это означает, что ваш контейнер никогда не будет по-настоящему центрирован.
$ (’# Content’). Masonry ({
// другие варианты кладки
isFitWidth: true
});
В браузере нажмите «Обновить»: теперь вы можете изменить размер браузера, и контейнер Masonry пересчитает его ширину, чтобы соответствовать количеству столбцов, которые он может отображать.
Каменная кладка также может оживлять эти кирпичи по мере того, как они занимают свои новые позиции, благодаря логике, которая ставит оставил а также вершина Значение CSS для каждого кирпича. Есть разные способы добиться этого, одни лучше, другие лучше. Наиболее очевидным является использование jQuery, который можно включить, вызвав isAnimated: правда при обращении к масонству.
Это делает свою работу, но анимация jQuery основана на манипуляциях с DOM, и наличие нескольких больших кирпичей может замедлить производительность анимации и сделать ее вялой. Другой способ добиться этого - использовать переходы CSS, которые будут анимировать оставил а также вершина Свойства CSS. Рассмотрение всех преимуществ использования переходов CSS по сравнению с анимацией jQuery - это совершенно отдельное обсуждение, но использование CSS для создания анимации намного надежнее и будет работать лучше почти при любых обстоятельствах с Masonry. Чтобы использовать переходы CSS, поместите эти значения в .пункт в style.css, позволяя оставил переход к новому значению с последующим вершина однажды оставил сделал анимацию.
-webkit-transition: левый .4s для легкости открытия, верхний .4s для легкого открытия .4s;
-moz-transition: левый .4s-easy-in-out, верхний .4s-easy-in-out .4s;
-ms-transition: левый .4s-easy-in-out, верхний .4s-easy-in-out .4s;
-o-transition: левый .4s для легкого выхода, верхний .4s для легкого входа .4s;
переход: левый .4s для облегчения входа-выхода, верхний .4s для облегчения входа-выхода .4s;
Хотя за последний год поддержка переходов CSS резко возросла, они не поддерживаются старыми браузерами, которые могут составлять большую часть вашей аудитории. Если вы хотите использовать переходы CSS, не жертвуя анимацией для некоторых пользователей, есть способ использовать оба метода анимации для оптимальной производительности в зависимости от возможностей браузера. При этом используется библиотека JavaScript под названием Modernizr, которая определяет, есть ли в браузере пользователя такие функции, как переходы CSS, доступные через Modernizr.csstransitions, который установлен на правда или же ложный в зависимости от поддержки переходов CSS пользователем.
В вашей настройке Masonry вам нужно будет вызвать следующий код.
$ (’# Content’). Masonry ({
// все остальные варианты кладки
isAnimated:! Modernizr.csstransitions
});
Это идеальный способ выполнения анимации, поскольку вы обеспечиваете максимальное удобство для пользователя. Пользователи, которые могут воспользоваться преимуществами переходов CSS, могут, а те, кто этого не делает, по-прежнему получают анимацию с помощью jQuery.
04. Проблемы с использованием на предприятии.
Masonry широко используется в Tumblr и небольших веб-сайтах, и его достаточно легко инициализировать. Но настройка его для корпоративного использования - это совершенно другая игра с собственными проблемами, не связанными с наложением изображений. До сих пор мы всегда знали, сколько элементов находится в нашем Masoned макете, и никогда не заботились о том, где был размещен какой-либо из элементов, пока не было перекрытия.
Ключом почти ко всем проблемам с Masonry является перезагрузка, чтобы вы могли измерить свои новые элементы и вписать их в свой макет. Иногда легче сказать, чем сделать, особенно при загрузке фреймов, встроенного контента или контента из стороннего скрипта. Вы можете расширить Masonry для измерения этих элементов по мере необходимости, а затем вызвать метод перезагрузки Masonry следующим образом:
$ (’# Content’). Masonry (’reload’);
По умолчанию Masonry оптимизирует расположение каждого кирпича, но иногда вам нужно, чтобы фрагмент контента был согласован в том, где он размещен. Если это относится к вам, у масонства есть особенность под названием угловой штамп позволяя вам всегда иметь кирпич в определенном месте. Это работает с помощью подключаемого модуля, который экономит место для этого кирпича при расчете его макета, что полезно для рекламных мест или рекламных материалов. Дополнительную информацию о cornerStamp можно найти здесь.
05. Отладка масонства
Если у вас по-прежнему возникают проблемы, есть ресурсы: воспользуйтесь консолью и посмотрите, что происходит. С консоли вы можете обновлять параметры, методы выпуска, проверять ширину и высоту и многое другое. Поэтому, если один или несколько кирпичей не измеряются правильно, вы можете отредактировать свой CSS с помощью инструментов браузера и перезагрузить Masonry, чтобы увидеть, были ли ваши изменения успешными. Также доступны данные из каждого экземпляра Masonry. Вы можете редактировать параметры на лету и посмотреть, правильно ли был инициализирован ваш Masoned объект. Чтобы просмотреть это, введите в консоль следующее.
$ (’# Content’). Data (’masonry’);
Еще одна отличная идея для тех, кто использует Masonry, - это посмотреть исходный код на GitHub - он поддерживается самим ДеСандро. Если вам интересно, как происходит измерение, вы можете найти функцию, которая делает это в макет() а также _placeBrick (). Важно иметь представление о том, что делает плагин внутри, особенно если это является ключевым моментом для презентации вашего сайта.
Если вы действительно в тупике, вы всегда можете обратиться к разделу «Проблемы» на GitHub. Публикуя проблему, постарайтесь быть как можно более информативным и укажите ссылку на то, где возникает проблема. Возможность видеть, что идет не так, значительно упрощает отладку и сэкономит всем участникам значительное количество времени. ДеСандро опубликовал рекомендации по отправке проблем в своей учетной записи Github, которые вы можете просмотреть здесь.
06. Заключение
Надеюсь, эта статья продемонстрировала вам некоторые возможности масонства - хотя я рассмотрел только начало того, что возможно, и постоянно разрабатываются новые варианты использования. Вы можете расширить Masonry такими функциями, как бесконечная прокрутка, несколько экземпляров и многое другое, чтобы максимально повысить удобство работы пользователя. Masonry - отличный плагин, который изменил то, как люди проектируют и взаимодействуют с Интернетом. Будет только лучше, чем больше людей будут участвовать и вносить свой вклад.
Спасибо Джейкобу Ван Луну за изображения, использованные в этом уроке.
Люк Шумард работает старшим веб-дизайнером в Dazed Digital и AnOther, двух крупнейших независимых изданиях о моде и стиле жизни в Великобритании.
