Masonry - сетка блоков (div) для сайта

30.09.2020
Masonry - сетка блоков (div) для сайта

Скачать:

Удалёнка:

<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:  

bower install masonry --save

Npm: 

 npm install masonry-layout

Установка в общем:

<script src="/path/to/masonry.pkgd.min.js"></script>

Сами элементы могут называться как захотите, в этой теме они стандартно называются:

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

Куда уже без CSS:

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

Ну стартер всего этого:

function initMasonry(){
	if($(window).width() > 1000){
		var colWidth = $('.container').width() / 5 - 20;
		var $grid = $('.grid').masonry({
			columnWidth: colWidth,
			gutter: 25,
			itemSelector: '.grid-item'
		});
	} else if ($(window).width() <= 768) {
		return false
	} else {
		var colWidth = $('.container').width() / 2;

		var $grid = $('.grid').masonry({
			columnWidth: colWidth,
			gutter: 0,
			itemSelector: '.grid-item'
        });
	}
}

Вот и всё, можно мастерить как захотите свою сетку, jquery сама сделает своё дело.

Если у кого то не получается добавить во 2-3-4 элементы (по середине) 2 класс, просто используйте:

$('.grid-item:nth-child(2)').addClass('grid-item--width2');

Где 2 — элемент.

Ну а если у Вас имеется какае табуляция переключение, возможно использоваться интервалы, либо ещё что нить по проще:

$( ".tabs__caption li" ).click(function(){
    setInterval(initMasonry, 500);
});

Где .tabs__caption li  — это мои пункты что активировать.

Ну и главное, вызвать функцию не забудь initMasonry();

 

Рейтинг: 5/5 - 1 голосов

Комментарии (0)




Разрешённые теги: <b><i><br>Добавить новый комментарий:


© 2020 Siteapp.by | Все права защищены