Я хочу видеть на своем сайте много картинок, аккуратно и динамично расположенных, и не хочу много кодить.
Каменная кладка сэкономит ваше время.
Masonry — это библиотека компоновки сетки JavaScript, созданная Дэвидом ДеСандро, которая мгновенно упорядочивает элементы в их оптимальном положении в зависимости от доступного вертикального пространства.
Чтобы начать использовать Masonry, вы можете загрузить библиотеку здесь:
- masonry.pkgd.min.js минимизирован, или
- masonry.pkgd.js неминифицированный
или ссылка CDN напрямую на файлы Masonry:
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>Менеджеры пакетов
Установить через Бауэр: bower install masonry --save
Установить с помощью npm: npm install masonry-layout
Давайте начнем!
Начнем с включения файла Masonry .js в нашу HTML-страницу.
<script src="/path/to/masonry.pkgd.min.js"></script>Размер наших изображений обрабатывается в нашем файле CSS.
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }Мы можем использовать Masonry как jQueryplugin$(‘selector’).masonry()
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
Мы создаем элемент <div> с классом “grid” в нашем файле HTML:
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
...
</div>Макет
Для размера и стиля мы делаем это непосредственно в нашем файле CSS:
.grid-item {
float: left;
width: 80px;
height: 60px;
border: 2px solid hsla(0, 0%, 0%, 0.5);
}
.grid-item--width2 { width: 160px; }
.grid-item--height2 { height: 140px; }
Для адаптивного макета с размерами, установленными в процентах, установите процентную ширину columnWidth и установите percentPosition: true, чтобы уменьшить переходы регулировки при изменении размера окна.
Masonry предоставляет ссылку на отдельный скрипт imagesLoaded для решения любых проблем с перекрытием изображений. Вы можете скачать на imagesloaded.desandro.com.
Мы запускаем метод Masonry layout после загрузки каждого изображения в сетку:
// init Masonry var $grid = $('.grid').masonry({ // options... });// layout Masonry after each image loads $grid.imagesLoaded().progress( function() { $grid.masonry('layout'); });
Или инициализируйте Masonry после загрузки всех изображений.
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
});
});
Параметры
Чтобы включить статический баннер или исключить элементы изменения размера, Masonry рекомендует всегда устанавливать itemSelector.
itemSelector: '.grid-item'
<div class="grid">
<!-- do not use banner in Masonry layout -->
<div class="static-banner">Static banner</div>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>Чтобы выровнять элементы по горизонтальной сетке, Masonry рекомендует установить ширину столбца.
columnWidth: 80
Вот полный список опций с демо-кодом для вышеуказанных гифок.
Методы
Для добавления элементов Masonry предоставляет методы appended и prepended.
// jQuery $grid.masonry( 'appended', elements ) // vanilla JS msnry.appended( elements )$('.append-button').on( 'click', function() { // create new item elements var $items = $('<div class="grid-item">...</div>'); // append items to grid $grid.append( $items ) // add and lay out newly appended items .masonry( 'appended', $items ); });
// jQuery $grid.masonry( 'prepended', elements ) // vanilla JS msnry.prepended( elements )$('.prepend-button').on( 'click', function() { // create new item elements var $items = $('<div class="grid-item">...</div>'); // prepend items to grid $grid.prepend( $items ) // add and lay out newly prepended items .masonry( 'prepended', $items ); });
Для удаления элементов используйте метод remove
// jQuery $grid.masonry( 'remove', elements ) // vanilla JS msnry.remove( elements )$grid.on( 'click', '.grid-item', function() { // remove clicked element $grid.masonry( 'remove', this ) // layout remaining item elements .masonry('layout'); });
Для получения элементов элемента в виде массива Masonry предоставляет метод getItemElements
// jQuery
var elems = $grid.masonry('getItemElements')
// vanilla JS
var elems = msnry.getItemElements()Вот полный список методов с демо-кодом для вышеуказанных гифок.
Начальная загрузка
Masonry также работает с системой сетки Bootstrap. Чтобы создать сетку из 3 столбцов, используя col-xs-4 как columnWidth:
<div class="container-fluid"> <!-- add extra container element for Masonry --> <div class="grid"> <!-- add sizing element for columnWidth --> <div class="grid-sizer col-xs-4"></div> <!-- items use Bootstrap .col- classes --> <div class="grid-item col-xs-8"> <!-- wrap item content in its own element --> <div class="grid-item-content">...</div> </div> <div class="grid-item col-xs-4"> <div class="grid-item-content">...</div> </div> ... </div> </div>$('.grid').masonry({ itemSelector: '.grid-item', // use a separate class for itemSelector, other than .col- columnWidth: '.grid-sizer', percentPosition: true });
Кредиты
Так вот! Вы также можете добавить волшебную сетку Masonry на свой сайт и дополнительно настроить ее с помощью событий и больше.
Выражаем благодарность за фрагменты кода и демонстрации David DeSandro за предоставленную замечательную библиотеку компоновки сетки, свободно доступную для использования и распространения.
