CSS не обновляется после скрипта Jquery - Изотопная асимметричная фильтруемая сетка

Question

Я пытаюсь создать асимметричную сетку фильтруемой сетки с изотопом, где асимметричный означает, что каждый столбец имеет различное значение 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).

Почему это происходит? Я что-то пропустил?

Answer 1

Вы не можете использовать 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/

Answer 2

Это довольно опрятно.

Вы не можете целиться .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;}

Проверьте скрипку здесь.

Answer 3

Проблема в том, что элементы после фильтрации все еще находятся в 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: '*' });

Вот скрипка, которая собирает все вместе. Я надеюсь, что это может помочь вам начать.