7

私はIsotopeの使い方を学んでいて、アイテムのサイズをアニメートする方法に関する著者のブログ投稿に出くわしました。

私は開発中のプロジェクトにそれを実装しました。3 つの縦の列で構成されます。各アイテムは 196px x 70px です。アイテムをクリックすると、402px x 230px に拡大されます。

最初のアイテムを除いて、すべてのアイテムのサイズが適切に変更され、Isotope によってレイアウトが更新されます。

最初のアイテムをクリックすると、後続のすべてのリスト アイテムが 1 つの垂直列に整列します。ただし、十分なスペースがあり、アイテムは最初のアイテムの周りを流れるはずです。

リスト内の他の項目をクリックすると、正しい動作が得られます。最初のものだけが不安定です。誰がこれを引き起こす可能性があるかを見ることができますか?

ここに私のテストケースがあります: 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' )

    });
4

1 に答える 1

11

もう少し実験した後、答えを見つけました。Isotope には columnWidth という属性があります。これは、スクリプトが最初の項目から列幅を決定できるため、ドキュメントではオプションであることがわかります。

ただし、 columnWidth を .isotope() 初期化子に追加すると、このことが正しく機能しました。

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

また、columnWidth はアイテムの幅と同じではないようです。アイテムの幅にガター (余白) を加えたものです。私の場合、columnWidth は 206: 196 (アイテムの幅) + 10 (ガター/マージン) でした。

于 2011-05-27T20:38:51.893 に答える