CSS не обновляется после скрипта Jquery - Изотопная асимметричная фильтруемая сетка
Я пытаюсь создать асимметричную сетку фильтруемой сетки с изотопом, где асимметричный означает, что каждый столбец имеет различное значение margin-top:
.active:nth-child(3n+1) .tile_inner {margin-top: 280px;}
.active:nth-child(3n+2) .tile_inner {margin-top: 140px;}
.active:nth-child(3n+3) .tile_inner {margin-top: 0;}
Таким образом, столбцы слегка смещаются, как вы можете видеть в этом Jsfiddle, который я сделал: https://jsfiddle.net/9wrjx9wb/4/
Стиль применяется не к самим плиткам (это повлечет за собой изотопные вычисления), а к дочерним элементам внутри них.
Теперь результат выглядит нормально, когда страница загружена, но, как только один или несколько фильтров активируются (путем нажатия на метки сверху), n-ное дочернее правило, кажется, применяется неправильно, хотя оно должно влиять только на отфильтрованные элементы (с классом.active).
Почему это происходит? Я что-то пропустил?
3 ответа
Вы не можете использовать nth-*
селектор здесь, потому что он считает всех братьев и сестер (не только .active
из них). Вы можете вручную установить поле с помощью небольшого JavaScript:
$container.find(filter).each(function(i) {
var off = (280-(i % 3)*140) + "px";
$(":first-child",this).css({"margin-top":off});
});
Скрипка здесь: https://jsfiddle.net/yc1ax79b/3/
Это довольно опрятно.
Вы не можете целиться .tile_inner
если вы хотите сделать это все же. Поля .tile_inner
не может повлиять на поля своего родителя.
Вместо этого вы можете выбрать .active
и измените отступы вместо полей.
.active:nth-child(3n+1) {padding-top: 280px;}
.active:nth-child(3n+2) {padding-top: 140px;}
.active:nth-child(3n+3) {padding-top: 0;}
Проблема в том, что элементы после фильтрации все еще находятся в DOM и nth-child
также считает скрытые элементы и nth-child
не работает так, как вы ожидаете (как вы только что нашли:P).
Мое предложение состоит в том, чтобы использовать arrangeComplete
событие и назначить first
, second
а также third
класс для видимых элементов.
Прежде всего, замените свой CSS nth-child
этим. Я добавил небольшой переход, чтобы сделать его более плавным, но он не идеален.
.active.first .tile_inner { transition: margin-top 0.2s linear; margin-top: 280px;}
.active.second .tile_inner { transition: margin-top 0.2s linear; margin-top: 140px;}
.active.third .tile_inner { transition: margin-top 0.2s linear; margin-top: 0;}
затем зарегистрируйте соответствующее событие
$container.on('arrangeComplete', function(event, filteredItems) {
$.each(filteredItems, function(i, e) {
$(e.element).removeClass("first second third").addClass(function() {
var modulus = i % 3;
if(modulus == 0) {
return "first";
} else if(modulus == 1) {
return "second";
} else if(modulus == 2) {
return "third";
}
});
});
});
Также я должен был добавить это во время запуска, чтобы вызвать arrangeComplete
событие, так что first
, second
а также third
занятия назначены. Конечно, вы можете избежать этого, установив класс самостоятельно. Что вы предпочитаете:)
$container.isotope({ filter: '*' });
Вот скрипка, которая собирает все вместе. Я надеюсь, что это может помочь вам начать.