Анимирование размера элемента в изотопе: почему первый элемент выигрышный? - PullRequest
Новая
       3

Анимирование размера элемента в изотопе: почему первый элемент выигрышный?

7 голосов
/ 27 мая 2011

Я учусь использовать Изотоп и наткнулся на сообщение в блоге автора о том, как анимировать элементы размером .

Я реализовал это для проекта Iразвиваюсь.Он состоит из трех вертикальных колонн.Каждый предмет размером 196 х 70 пикселей.Когда вы щелкаете элемент, он увеличивается до 402px x 230px.

Все элементы изменяют размер правильно и заставляют Isotope обновлять макет - кроме первого элемента.

Нажатие первого элемента вызываетвсе последующие элементы списка выстраиваются в одну вертикальную колонку - хотя места достаточно, и элементы должны обтекать первый элемент.

Нажатие любого другого элемента в списке приводит к правильному поведению,Только первый - шаткий.Кто-нибудь может увидеть, что может вызвать это?

Вот мой тестовый пример: http://joshrenaud.com/pd/testcase/testcase.html

Код, который обрабатывает это изменение размера, выглядит следующим образом: 

    $('.child').click(function(){
        var $this = $(this);
        if ($this.hasClass('big')) {
            tileStyle = { width: 196, height: 70};
        }
        else {
            tileStyle = { width: 402, height: 230};
        }
        $this.children().children('.childDate').toggle();
        $this.children().children('.childDesc').toggle();
        $this.toggleClass('big');

        $this.find('.child-content').stop().animate( tileStyle );

        $('#container').isotope( 'reLayout' )

    });

1 Ответ

11 голосов
/ 28 мая 2011

Я нашел ответ после еще нескольких экспериментов. У изотопа есть атрибут columnWidth, который документы определяют как необязательный, поскольку скрипт может определять ширину столбца по первому элементу.

Однако добавление columnWidth в мой инициализатор .isotope () сделало эту работу правильной. 

$('#container').isotope({
    masonry: { columnWidth : 206 }
});

Кроме того, кажется, что columnWidth равно , а не так же, как ширина элемента. Это ширина элемента плюс желоб (поле). В моем случае, columnWidth было 206: 196 (ширина элемента) + 10 (желоб / поле).

...