Css кирпичная кладка блоков
Обновлено: 01.05.2024
Доброго времени суток всем! Это моя вторая статья в этом году. Первую про иконочный шрифт я опубликовал совсем недавно и меня радует, что я нашел время для написания второй статьи с таким небольшим отрывом. Пока для меня это небольшой отрыв, т.к. чаще писать нет возможности, но я стараюсь. 😎 А теперь давайте разберемся о чем пойдет речь в этой статье.
Быть может многие из вас видели на сайтах расположение элементов (картинок, статей, различных блоков) кирпичным эффектом. Вы скажите — это же можно и через CSS сделать? Может и можно, но только такой гибкости не будет. Скрипт сам расставляет элементы на странице, используя вертикальное пространство. Также при позиционировании блоков скрипт добавляет анимацию. Пронаблюдать это можно в адаптивном дизайне, уменьшая окно браузера. Так вот, достигается это все с помощью небольшой javaScript-библиотеки — Masonry. Данный скрипт очень широко используется в современных трендовых дизайнах. Не знаю как в русско-язычном, но в зарубежном интернете Masonry получил большую популярность.
Автором Masonry является David DeSandro из США. Хотелось бы сказать ему большое спасибо за такой хороший скрипт. Распространяется данная библиотека абсолютно бесплатно, так что смело можете использовать ее на своем сайте.
Я думаю многим понравилось. На самом деле все очень красиво смотрится. Давайте разберемся как работать с Masonry, как вывести на нашем сайте наши блоки кирпичным эффектом?
На сайте для скачивания имеются две версии скрипта — сжатая (минимизированная) и несжатая. Лучше использовать именно сжатую — masonry.pkgd.min.js. Также библиотеку можно подгрузить и из CDN:
Для работы Masonry нам необходимо создать родительский блок и положить в него сами элементы.
Для наглядности я создал демо-страничку с картинками разных размеров. В качестве примера элементов я взял именно картинки, т.к. они имеют разную высоту, но вместо картинок может быть любой блок: текст, видео и др. Попробуйте уменьшить окно браузера и вы увидите, как картинки плавно меняют свою позицию.
Давайте посмотрим как будет выглядеть html-код:
Как видим, css используется здесь по минимуму.
Инициализируем плагин Masonry
Сделать это можно несколькими способами.
Инициализация Masonry через javaScript
Вы можете использовать Masonry как jQuery-плагин:
Но имейте ввиду, что для этого метода у вас должна быть подключена библиотека jQuery:
На демо-страничке я инициализировал Masonry, как jQuery-плагин, т.е. код инициализации у меня следующий:
Если вы обратили внимание методу «masonry()» мы передали две опции: ItemSelector и columnWidth. Это обязательные две опции. По словам разработчика они необходимы для нормальной работы скрипта. Впрочем, об опциях мы поговорим чуть ниже. Все, после этих действий должно все работать.
Инициализация с помощью Vanilla JavaScript
Вы можете использовать Masonry также и с Vanilla JS:
Конструктор Masonry() принимает два аргумента: дочерний элемент контейнера и опции объекта. Код инициализации будет следующий.
Честно говоря, не работал с Vanilla JS поэтому конкретно не могу сказать чем он хорош, чем jQuery. Просто знайте, что есть такой метод.
Инициализация через HTML
Вы можете инициализировать Masonry через HTML, не написав ни единой строчки javaScript кода. Для этого понадобится добавить всем дочерним элементам контейнера атрибут — «data-masonry». Опции можно передать, в качестве значения.
Передаваемые параметры должны соответствовать формату JSON. Хочу обратить ваше внимание на использование кавычек в коде. Кавычки для атрибута data-masonry пишутся одинарными, а для передаваемых опций — двойные. Т.е. именно так, как показано на примере.
Данный вариант можно использовать, если вы не хотите использовать на сайте лишний javaScript. Например, я бы не стал лишний раз грузить jQuery, если на сайте он у меня нигде не используется.
Вот такая вот библиотека. Ничего сложного нет. А что дальше?
Если обратиться к документации, то дальше идет разбор: размеры элементов контейнера, опции, события, методы.
Размеры элементов
Размеры дочерних элементов могут быть как фиксированными, так и резиновыми. При фиксированном размере (ширина и высота) элементов ширина блоков и их оформление задается в пользовательском css-файле стилей. По высоте хочу сказать, если вы используете не пустые блоки, то высота блока будет высчитываться браузером, исходя из его содержимого. В моем случае я высоту не задаю, т.к. картинки итак имеют свою высоту.
Резиновая сетка
При резиновой сетке ширина элементов задается в процентах. Резиновую сетку в основном используют в адаптивном дизайне. Подробнее об опциях поговорим ниже.
ImagesLoaded
Иногда при загрузке страницы может случиться так, что элементы будут перекрывать друг друга. При этом они собираются все в один комок и смотрится все ужасно. Так вот решить эту проблему можно с помощью небольшой библиотеки — imagesLoaded. Наиболее хорошо это проявилось у меня при адаптивном дизайне. Именно, когда я сайт открывал с мобильного телефона сетка изображений у меня собиралась в одну кучу.
Подключаем imagesLoaded с CDN:
С помощью imagesLoaded элемент позиционируется на странице только после полной его загрузки.
Или инициализация Masonry происходит только после полной загрузки всех изображений.
Опции (Options)
Теперь давайте разберем какие мы можем передать опции методу masonry().
Все опции сгруппированы. Ну, это сделано, чтобы легче было в них ориентироваться.
Теперь давайте посмотрим какие опции входят в определенную группу.
Рекомендованные (Recommended)
itemSelector
Данная опция указывает к каким элементам будет применяться эффект Masonry. Полезно указывать данную опцию, потому что тем самым мы можем отсечь элементы которые не являются частью макета. Этот параметр нам уже знаком, когда мы разбирали инициализацию Masonry.
columnWidth
Задает ширину элементов макета. Если данный параметр опустить Masonry возьмет внешнюю ширину первого элемента. Разработчик всегда советует указывать ширину колонок, будь то элементы фиксированные или резиновые.
Размеры элементов (Element sizing)
Если мы хотим сделать наш макет с элементами резиновым, например, при адаптивном дизайне, то для этих целей предусмотрен параметр, который делает нашу сетку резиновой.
percentPosition
Код резиновой сетки мы разбирали выше, но в подробности опций не вдавались.
Как видим, чтобы активировать резиновую сетку мы добавили параметр percentPosition в код инициализации с булево значением «true«. А в качестве ширины указали класс элемента, которому в css присвоена ширина в процентах.демо
gutter
Между элементами можно задать отступ по горизонтали с помощью опции gutter, передав число. Число будет соответствовать отступам в пикселях.
Отступы по вертикали между элементами задаются в css.
Отступы можно задать и в процентах, т.е. они будут меняться в зависимости от размера окна браузера.
Мы создали пустой DIV-блок перед списком элементов.
В CSS для данного блока указали ширину в процентах. А в коде инициализации опции gutter мы указали класс данного пустого элемента. Скрипт сам создаст отступы в процентах, исходя из ширины данного блока.Демо
stamp
Данной опцией можно назначить элементы, которые будут штампованы в сетке Masonry. Остальные элементы будут находиться ниже и будут обтекать штампованные. Иногда это может быть полезным. Опции stamp передаем класс штампованного элемента.
Детальнее пример вы можете посмотреть на Codepen, а также отредактировать при необходимости.
fitWidth
Суть данной опции состоит в том, что когда мы ее активируем родительскому блоку элементов добавляется фиксированная ширина в пикселях. Причем ширина родительского блока равна сумме ширин всех дочерних элементов. Таким образом, указав в css родительскому блоку правило «margin: 0 auto» мы можем расположить блок с элементами Masonry по центру.
Внимание! Данная опция не работает с элементами, ширина которых указана в процентах. Значение опции «columnWidth» должно быть указано в пикселях, например, «columnWidth: 120». Иначе, элементы могут налезть друг на друга.
originLeft
По умолчанию все элементы сетки выравниваются слева на право. С опцией originLeft можно изменить горизонтальный поток элементов и задать выравнивание справа налево. Достаточно передать булево значение «false».
originTop
Также как и по горизонтали по умолчанию элементы сетки выравниваются по верхнему краю. С опцией originTop можно изменить поток элементов по вертикали и задать выравнивание снизу вверх, примерно как в тетрисе .
Настройки (Setup)
Переходим к опциям настроек.
containerStyle
Данная опция отменяет стили родительского контейнера элементов. По умолчанию родителю задается правило «position: relative». Данное правило можно отменить.
Конечно, можно было и переопределить через файл CSS с помощью «!important», но я не люблю так делать. Вообще я считаю это правило дурного тона в верстке. Лучше все же очистить стили, тем более разработчик дает нам такую возможность.
transitionDuration
Продолжительность перехода, когда элементы меняют свое местоположение. По умолчанию задано время — 0.4 сек. Формат времени задается, как формат времени CSS.
Вот некоторые примеры установки времени.
resize
C помощью данной опции можно отменить изменение размеров родительского блока. Т.е. по умолчанию, если не задать фиксированный размер родителю при уменьшении экрана браузера наши дочерние элементы сетки будут менять свое месторасположение, будут перемещаться вниз, занимая свободное пространство. Так вот с помощью опции «resize» можно отменить переходы.
Честно говоря, такого же эффекта можно добиться, если задать родителю просто фиксированный размер. Здесь я не понимаю разработчика — либо я что-то недопонял, либо данная опция имеет место быть в определенных случаях. Подробнее можете посмотреть на примере в Codepen. Попробуйте изменить размер экрана браузера. Потом поменяйте «resize: false» на «resize: true» и поймете о чем идет речь.Посмотреть на CodePen
initLayout
Данная опция активирует нашу кирпичную сетку при инициализации скрипта. По умолчанию она включена — «initLayout: true». Но можно и отменить.
Вы можете использовать методы и события перед активацией сетки. Например, вы можете сделать так, что ваша сетка будет активироваться по клику определенной кнопки. Ну и далее что-то в этом роде.
В данной статье я не буду разбирать события и методы, т.к. статья итак получилась объемной. Вы можете их самостоятельно изучить на сайте разработчика. Там же найдете и примеры реализации. Все довольно понятно изложено. Не всегда авторами скриптов пишутся такие инструкции. За инструкцию Masonry разработчику я бы поставил твердую — 5.
Masonry на чистом CSS
Есть также вариант реализовать кирпичную кладку на чистом css. Не буду приводить здесь весь код. Можете глянуть на CodePen, ничего сложного нет. В данном случае удобно тем, что не нужно подключать лишние js-библиотеки и разбираться в опциях плагина.
В принципе все то, что я изложил выше хватает, чтобы задействовать кирпичный эффект на своем сайте.
А на этом все. Всем спасибо за внимание. Задавайте вопросы в комментариях, всегда буду рад помочь. Встретимся в следующих статьях. Пока!
Всем привет! Сегодня я бы хотел рассказать о том, как можно без плагинов и скриптов сделать блоки в виде кирпичной кладки (masonry с англ. — кирпичная кладка), то есть блоки разной высоты будут красиво друг под другом располагаться без больших пустых отступов. Да! Всё это можно очень легко сделать с помощью css.
В css есть свойство, с помощью которого можно создать многоколоночный текст или блоки. Им и воспользуемся.
Свойство так и называется columns. Это универсальное свойство, которое позволяет сразу задать ширину и количество колонок. Подробнее о нём вы можете почитать в хорошем css справочнике .
Итак, всё на самом деле очень просто. Например, у нас есть 6 элементов разной высоты, но одинаковой ширины. Яркий пример — это сайдбар (боковая колонка) на сайтах. Тут все блоки одинаковой ширины, но разной высоты. Обычно в мобильной версии сайта сайдбар располагают после основного контента, внизу сайта, а сам контент делают на всю ширину экрана. Естественно так же в одну колонку располагать сайдбар нерационально, так как по бокам будет много свободного места, особенно, если смотреть с планшета.
Но, если блокам задать свойство display: inline-block, то они автоматически, если хватает ширины контейнера, расположатся в несколько колонок. Однако всё может выглядеть не очень красиво:
Для кроссбраузерности используем свойства для Firefox и Webkit браузеров(Chrome, Safari, Android). Например мы расположим блоки с помощью маркированного списка тогда стили для примера на картинке будут выглядеть так:
В таком случае блоки будут располагаться в несколько колонок минимальной шириной 300px, а количество колонок будет автоматически определяться браузером. Это удобно для создания адаптивности. В данном случае будет 3 колонки, и вот как это будет выглядеть:
Ширину контейнера(1050px) придётся подобрать, если хотите, чтобы расстояние между блоками по вертикали совпадало с расстоянием по горизонтали. Иначе ширина между колонками установится браузером автоматически. Есть свойство column-gap, которое задаёт расстояние между колонками. Но в данном случае оно будет работать не так, как хочется.
Есть другой вариант: для блоков нужно установить свойство width:100%. Также, если установлено свойство padding, как в моём случае, то необходимо установить свойство box-sizing: border-box. Теперь можно смело добавлять к контейнеру свойство column-gap, чтобы установить расстояние между колонками. Так оно будет работать как нужно.
Согласитесь, так смотрится гораздо лучше! Так же вы сможете расположить «div» блоки внутри контейнера «div». Либо, если вам нужно распределить текст на несколько колонок то, просто в тег «p» с, например, классом «text» добавляем нужный текст и для этого класса прописываем свойство columns.
Вот и всё! Так просто без лишних скриптов можно расположить блоки в виде кирпичной кладки или текст в несколько колонок. Но учтите, что в данном случае будет красиво смотреться только, если блоки будут одинаковой ширины. В другом случае остаётся только использовать хороший скрипт masonry . Скрипт автоматически абсолютно позиционирует каждый блок. Но это уже другая тема…
На этом всё! Если появились какие-то вопросы или замечания, оставляйте их в комментариях. Удачи!
Встречали сайты, где блоки разных размеров выводятся в контейнер, максимально рационально заполняя пространство?
Сделать такой вывод позволяет скрипт David'a DeSandro, который называется Masonry (с англ. кирпичная кладка). Также, наглядный пример можете посмотреть на официальном сайте скрипта. На офф. сайте вы найдете полную документацию на английском.
Masonry — это Javascript библиотека, позволяющая выводить HTML блоки в компактно-сложенном виде. Скрипт анализирует высоту каждого блока и максимально экономя пространство располагает его.
Возможно кто-то уже давно слышал о нем и даже использовал его в своих проектах, но я впервые столкнулся с ним недавно. Не могу сказать, что каждый сможет легко сделать любой вывод. Но с базовым использованием думаю справится каждый. Разобраться что и как там работает не так просто, но сказать что очень сложно я тоже не могу. Если вы неплохо разбираетесь в JS, то любой вывод должен получиться. Цель этого поста познакомить вас с Masonry и оставить заметку о нем для себя.
Masonry работает самостоятельно без использования библиотек, но также может использоваться как jQuery плагин.
В этом посте я сделаю перевод главной страницы офф-сайта, которая объясняет как начать работать со скриптом.
Masonry на Javascript
Подключение Masonry
Эти пакеты установки, содержат все что нужно, для использования Masonry:
Скачивайте js файл и подключайте его к вашему сайту:
Для WordPress подключать лучше используя функцию wp_enqueue_script():
Masonry работает с элементами контейнера, для которых указан один и тот же класс item:
Класс можно указать любой, главное при вызове определить опцию itemSelector : '.item' .
Для блоков контейнера нужно указать ширину. Ширину нужно подбирать соответствующую контейнеру и параметру columnWidth (ширина колонки):
Включение Masonry (Инициализация)
Чтобы скрипт начал работать его нужно применить к нашему контейнеру. Запуск скрипта в виде экземпляра на чистом javascript делает так:
В этом случае конструктор экземпляра содержит 2 аргумента: columnWidth (ширина колонки) и itemSelector (класс блоков в контейнере с которыми будет работать Masonry). Это не все опции, остальные смотрите в документации или ниже на этой странице.
Инициализация через HTML
Masonry можно запустить не используя Javascript, прямо из HTML, указав class js_masonry контейнеру и указав параметры в атрибуте data-masonry-options :
Опции установленные в HTML должны быть в формате JSON. Аргументы должны быть в кавычках "itemSelector": . Имейте ввиду, что значение аттрибута HTML должно быть в одинарных кавычках ' , потому что свойства JSON используют двойные кавычки " .
Инициализация через jQuery
Для использования Masonry не нужно jQuery, но если вам удобнее работать с jQuery, masonry работает с ним как плагин.
Чтобы получить экземпляр используйте метод .data('masonry') :
Инициализация для блоков с изображениями
Так как картинки подгружаются отдельно от HTML кода, применение "Масонри" для блоков с картинкой обычно вызывает ошибку - наложение одного блока на другой. Так происходит потому что Масонри срабатывает до того, как картинка в блоке подгружается, блоку устанавливается высота, а затем картинка "рушит" эту высоту. Решить эту проблему можно несколькими способами:
Способ 1
Установить для всех изображений размеры жестко: ширину и высоту в пикселях.
Способ 2
Повесить обработку Масонри на событие load . Код для jQuery:
Минус этого способа в том, что тут скорее всего придется ждать загрузки всего "окна": jQuery(window).load . Использовать load отдельно для элемента редко допустимо, потому что jQuery будет интерпретировать его как AJAX функцию load. Чтобы этого избежать используйте 3-й пример.
Способ 3
Инициализировать работу Масонри, после того, как все картинки будут загружены. А для проверки загрузки использовать дополнительный JS скрипт imagesLoaded. Код:
Заметка: также ошибка может быть при использовании дополнительных шрифтов, поэтому загрузку шрифтов нужно проверять.
Свойства
Обязательные свойства это: columnWidth and itemSelector . Все остальные можно использовать по желанию:
itemSelector(строка) (обязательный) Определяет какой дочерний элемент контейнера будет использован при построении кладки. Элемент нужно указывать, чтобы исключить другие элементы контейнера, которые используются для установки размеров см. "columnWidth": ".grid-sizer" .
По умолчанию: нет columnWidth(число/элемент/селектор в виде строки) (обязательный) Ширина колонки в пикселях: "columnWidth": 60 . Если установить селектор или элемент, masonry будет использовать ширину установленного элемента: "columnWidth": ".gutter-sizer" .Masonry рассчитывает внешнюю ширину блоков, с учетом css свойств border, padding, margin.
По умолчанию: нет containerStyle(объект) CSS стили которые применяются к контейнеру. Чтобы отменить применение masonry стилей к контейнеру укажите containerStyle: null
По умолчанию: gutter(число/элемент/селектор в виде строки) Расстояние между элементами, подобное margin-right . Пример: "gutter": 10
По умолчанию: 0 hiddenStyle(объект) Стили применяемые к спрятанным элементам.
По умолчанию: isFitWidth(логический) Устанавливает ширину контейнера равную доступному числу колонок, рассчитанную из ширины элементов контейнера. Когда установлен параметр, вы можете отцентровать контейнер через CSS. Заметка: это свойство не работает, если элементам контейнера установлена ширина в %, нужно в пикселях: width: 120px . Также, опция columnWidth должна быть установлена в фиксированное значение, например: columnWidth: 120 .
По умолчанию: false isInitLayout(логический) Включает подстройку блоков во время инициализации. Установите в false, чтобы скрипт не строил кирпичную кладку при инициализации, так вы сможете использовать методы и добавлять события перед обработкой элементов контейнера.
По умолчанию: true isOriginLeft(логический) Контролирует горизонтальное расположение блоков. По умолчанию блоки расставляются с лева на права. Установите в false, чтобы расположить блоки с права на лева.
По умолчанию: true isOriginTop(логический) Контролирует вертикальное расположение блоков. По умолчанию блоки располагаются сверху вниз. Установите в false, чтобы блоки располагались снизу вверх.
По умолчанию: true isResizeBound(логический) Связывает расположение блоков с изменениями размеров окна.
По умолчанию: true stamp(элемент/массив элементов/строка селектор/NodeList) Определяет какие блоки нужно зафиксировать при выводе. Это специальные элементы к которым не будет применен эффект masonry. "stamp": ".stamp"
По умолчанию: нет transitionDuration(строка) Продолжительность перехода (скорость анимации), когда блоки меняют позицию или появляются. Нужно устанавливать в формате времени для CSS. Чтобы отменить всю анимацию установите в 0: transitionDuration: 0
По умолчанию: '0.4s' visibleStyle(объект) Стили, которые будут применены при показе скрытых элементов.
По умолчанию:
Масонри на чистом CSS
C недавних пор, практически все браузеры понимают свойство CSS column-count , смотрите сами.
А раз так, то больше нет необходимости подключать javascript и можно сделать блоки Masonry на чистом css. Конечно такой вариант менее гибкий в настройках, но он в разы проще и быстрее устанавливается и разобраться в нем проще.
У нас есть такой HTML код:
И мы подключаем для него такие css стили:
Минусов у этого варианта хватает
Пробежимся по минусам этого метода и чем он уступает масонри.
Поддержка браузеров, на сегодня (2016 г.) отличная, но все же не полная.
Любую анимацию, нужно будет дописывать вручную.
Главный минус column-count и, собственно, причина, по которой нельзя использовать этот способ вместо masonry в большинстве случаев - это направление блоков.
Если у masonry читается по горизонтали:
1 2 3
4 5 6
То в column-count по вертикали:
1 3 5
2 4 6
С таким подходом использовать с хронологической точки зрения не вариант.
Динамическое добавление элементов в блок, например при AJAX погрузке, сбивает с толку. Т.е. Масонри, добавляет новые элементы после текущих и не трогает текущие, так нет путаницы что добавилось, а что нет. А вот этот вариант, путает элементы.
Например, у нас есть 3 колонки и 30 элементов - условно по 10 в каждой колонке. Добавляем еще 10 и они добавятся не равномерно во все 3 колонки, не затрагивая предыдущее расположение элементов, а добавятся в HTML, а затем браузер перестроит расположение. При этом в первую колонку может попасть 1 элемент, во вторую 2, а в третью 8. В результате, после динамического добавления элементов почти всегда получается путаница: что было и что добавилось.
Поэтому, если планируете подгружать элементы аяксом - этот вариант рассматривать не стоит!
Верстка
Знакомы с социальной сетью pinterest, где блоки разных размеров выводятся в контейнер, максимально рационально заполняя пространство?
Masonry — это Javascript библиотека (может работать как в паре с jQuery, так и без него), позволяющая выводить HTML блоки в компактно-сложенном виде. Скрипт анализирует высоту каждого блока и максимально экономя пространство располагает его.
Установка Masonry
Вы можете скачать masonry, затем залить в папку со скриптами и подключить. Ну лучше использовать CDN.
- masonry.pkgd.min.js — минифицированная версия;
- masonry.pkgd.js версия без минификации.
Ссылка непосредственно на файлы Masonry в unpkg .
Менеджеры пакетов
Установить с помощью Bower: bower install masonry --save
Установить с помощью npm: npm install masonry-layout
Начало работы
Включите .js файл Masonry на свой сайт.
Кирпичная кладка работает с элементом сетки контейнера с группой дочерних элементов.
Класс можно указать любой, главное при вызове определить опцию itemSelector : '. grid-item ' .
Все размеры элементов обрабатываются вашим CSS.
Инициализация Masonry с помощью jQuery
Вы можете использовать масонри, как плагин JQuery: . $( 'selector' ).masonry()
Инициализация Masonry с помощью ванильного JavaScript
Вы можете использовать Кладку с ванильным JS: . Конструктор принимает два аргумента: элемент контейнера и объект опций. new Masonry ( elem, options ) Masonry ()
Инициализация Masonry прямо в HTML
Вы можете инициализировать Masonry в HTML без написания JavaScript. Добавьте data-masonry атрибут к элементу контейнера. Параметры могут быть установлены в его значении.
Отредактируйте эту демонстрацию на CodePen
Параметры, установленные в HTML, должны быть допустимым JSON. Например, ключи должны быть указаны в кавычках "itemSelector" : . Обратите внимание, что значение data-masonry установлено в одинарных кавычках ' , но объекты JSON используют двойные кавычки " .
Инициализация HTML ранее выполнялась с классом js-masonry и настройками параметров data-masonry-options в Masonry v3. Masonry v4 обратно совместим с этим кодом.
Параметры
Все опции необязательны, но columnWidth и itemSelector рекомендуются использовать.
Рекомендуемые
itemSelector
Определяет, какие дочерние элементы будут использоваться в качестве элементов элемента в макете.
Рекомендуется всегда устанавливать itemSelector . itemSelector полезно для исключения элементов изменения размера или других элементов, не являющихся частью макета.
columnWidth
Выравнивает элементы по горизонтальной сетке.
Рекомендуется установить columnWidth . Если columnWidth не установлен, Masonry будет использовать внешнюю ширину первого элемента.
Используйте размер элемента для адаптивных макетов с процентной шириной. Установите значение columnWidth Element или Selector String, чтобы использовать внешнюю ширину элемента в качестве размера столбца.
Макет
Размер элементов
Все размеры и стили элементов обрабатываются вашим собственным CSS.
Адаптивные макеты
Для адаптивных макетов размеры элементов могут быть заданы в процентах. В masonry режиме макета установите ширину в процентах columnWidth с размером элемента . Установите так, чтобы позиции элементов также задавались в процентах, чтобы уменьшить количество переходов между настройками при изменении размера окна. percentPosition: true
imagesLoaded
Инициализируйте Masonry, затем запускайте layout после загрузки каждого изображения.
Мне нужно реализовать довольно нестандартную планировку кладки. Однако по ряду причин я не хочу использовать для этого JavaScript.
- Все элементы имеют одинаковую ширину
- Элементы имеют высоту, которую невозможно вычислить на стороне сервера (изображение плюс различное количество текста)
- Я могу жить с фиксированным количеством столбцов, если мне нужно
есть тривиальное решение, которое работает в современных браузерах - column-count свойство.
Проблема с этим решением в том, что элементы упорядочены по столбцам:
Пока мне нужно, чтобы элементы были упорядочены по строкам, хотя бы примерно:
Подходы, которые я пробовал, не работают:
- Изготовление предметов display: inline-block : тратит вертикальное пространство.
- Изготовление предметов float: left : лол, нет.
Теперь я мог бы изменить рендеринг на стороне сервера и переупорядочить элементы, разделив количество элементов на количество столбцов, но это сложно и подвержено ошибкам (в зависимости от того, как браузеры решают разделить список элементов на столбцы), поэтому я хотел бы по возможности избегать этого.
Есть ли какая-то новомодная магия flexbox, которая делает это возможным?
Если вы можете заранее определить высоту элементов, зная высоту строки, размер шрифта (вам нужно будет указать конкретный шрифт и произвести некоторые умные вычисления), высоту изображения, поле по вертикали и отступы, вы можете сделай это. В противном случае вы не сможете сделать это, используя только CSS. Вы также можете использовать что-то вроде PhantomJS для предварительного рендеринга каждого элемента и получения высоты этого элемента, но при этом будут добавлены значительные накладные расходы / задержка.
Flexbox
Динамическая разметка каменной кладки невозможна с помощью flexbox, по крайней мере, в чистом и эффективном виде.
Flexbox - это система одномерного макета. Это означает, что он может выравнивать элементы по горизонтальным ИЛИ вертикальным линиям. Гибкий элемент ограничен своей строкой или столбцом.
Настоящая сетка двумерна, то есть она может выравнивать элементы по горизонтальным И вертикальным линиям. Элементы содержимого могут одновременно охватывать строки и столбцы, чего не могут сделать гибкие элементы.
Вот почему возможности flexbox для построения сеток ограничены. Это также причина, по которой W3C разработал другую технологию CSS3, Grid Layout .
row wrap
В гибком контейнере с flex-flow: row wrap гибкими элементами должны быть перенесены в новые строки .
Это означает, что гибкий элемент не может быть перенесен под другой элемент в той же строке .
В результате, когда элементы не самые высокие в ряду, остается пустое пространство, создавая неприглядные зазоры.
column wrap
Если вы переключитесь на flex-flow: column wrap , сетка станет более доступной. Однако контейнер с направлением столбца сразу же имеет четыре потенциальных проблемы:
- Элементы Flex перемещаются вертикально, а не горизонтально (как вам нужно в этом случае).
- Контейнер расширяется по горизонтали, а не по вертикали (как макет Pinterest).
- На момент написания этой статьи он имеет недостаток во всех основных браузерах, в которых контейнер не расширяется для размещения дополнительных столбцов .
В результате контейнер в направлении столбца не подходит в этом случае, как и во многих других случаях.
CSS Grid с неопределенными размерами элементов
Макет сетки был бы идеальным решением вашей проблемы, если бы можно было заранее определить различную высоту элементов контента . Все остальные требования находятся в пределах возможностей Grid.
Необходимо знать ширину и высоту элементов сетки, чтобы закрыть пробелы с окружающими элементами.
Таким образом, Grid, который является лучшим CSS, который может предложить для построения горизонтального макета кирпичной кладки, в этом случае не справляется.
Фактически, пока не появится технология CSS, способная автоматически закрывать пробелы, у CSS вообще нет решения. Что-то вроде этого, вероятно, потребует перекомпоновки документа, поэтому я не уверен, насколько это будет полезно или эффективно.
Вам понадобится сценарий.
Решения JavaScript, как правило, используют абсолютное позиционирование, которое удаляет элементы контента из потока документов, чтобы переупорядочить их без пропусков. Вот два примера:
CSS Grid с определенными размерами элементов
Для макетов, в которых известны ширина и высота элементов содержимого, вот горизонтальный макет кладки на чистом CSS:
Читайте также: