@megamage
Люблю грозу в начале мая!

Почему masonry перестраивает элементы в одну колонку?

Добрый!
Открываю сайт для просмотра на временном домене САЙТ
На секции портфолио (самая последняя) есть выбор категории
Все элементы расположены правильно, но если выбрать категорию например webdesign, то элементы некрасиво встанут в одну линию.
Это очень странно, так как на категории all или например app такого не наблюдается
Подскажите пожалуйста, в чем дело?
вот js для этой секции
//start portfolio

	var $grid = $('.portfolio-grid').masonry({
		columnWidth: '.grid-item',
		itemSelector: '.grid-item',
		singleMode: true,
		isResizable: true,
		isAnimated: true,
		percentPosition: true
	});

	$(".a-filter li").click(function() {
		$('.portfolio-grid').masonry('layout');
		var group = $(this).data('category');
		var group_class = "." + group;
		
		if(group == "*"){
			$(".grid-item").show();
			$('.portfolio-grid').masonry('layout');
		} else if(group != "") {
			$(".grid-item").hide();
			$(group_class).show();
			$('.portfolio-grid').masonry('layout');
		} else {
			$(".grid-item").show();
			$('.portfolio-grid').masonry('layout');
		}
	});
	
	var max_click = 5;
	var current_click = 0;

	$('.addtext').on( 'click', function() {
		current_click++;
		if(current_click < max_click) {
			var elems = [ getItemElement(), getItemElement(), getItemElement() ];
			var $elems = $( elems );
			$grid.append( $elems ).masonry( 'appended', $elems );
		}
		if(current_click == max_click) {
			var elems = [ getItemElement(), getItemElement(), getItemElement() ];
			var $elems = $( elems );
			$grid.append( $elems ).masonry( 'appended', $elems );
			$('.addtext').hide();
		}
	});

	function getItemElement() {
		var elem = document.createElement('div');
		$(elem).prepend('<div class="grid-overlay"></div>');
		$(elem).find('.grid-overlay').append('<span class="text-ovelay">Client: <span class="overlay-cnt overlay-cnt_c">Esquire</span></span>');
		$(elem).find('.grid-overlay').append('<span class="text-ovelay">Date: <span class="overlay-cnt overlay-cnt_d">2014</span></span>');
		$(elem).find('.grid-overlay').append('<a href="#" class="button btn-portfolio">View</a>');
		var hRand = Math.random();
		var heightClass = hRand > 0.9 ? 'item-h2 app c1' : hRand > 0.8 ? 'item-h2 webdesign c2' : hRand > 0.7 ? 'item-h1 branding c3' : hRand > 0.6 ? 'item-h2 webdesign c4' : hRand > 0.5 ? 'item-h1 branding c5': hRand > 0.4 ? 'item-h2 print c6' : hRand > 0.3 ? 'item-h1 motion c7' : hRand > 0.2 ? 'item-h2 print c8' : hRand > 0.1 ? 'item-h1 motion c9' : '';
		elem.className = 'grid-item ' + heightClass;
		return elem;
	}
	
	//close portfolio
  • Вопрос задан
  • 160 просмотров
Решения вопроса 1
@megamage Автор вопроса
Люблю грозу в начале мая!
Используйте isotope для фильтрации, а не кастомные скрипты
работает отлично!
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы