0

ねえ、これが私が働いているウェブサイトですhttp://trevormsmith.com/linx/art.html

フィルター システム (フッター内) を構築しようとすると、特定のカテゴリ (ミニマリスト、タイポグラフィ、抽象) をクリックすると、石積みがグリッドではなく単一の列に画像をリセットします。ブラウザのサイズを変更すると、通常のサイズに再調整されます。

これは、画像を含むコンテナーに石積みを呼び出しているものです

また、#minimalist、#typographic、#abstract を display:none の代わりに display:show に設定すると (そうする必要があります)、レイアウトは問題なく、スムーズに動作します。

助言がありますか？

編集：したがって、石積みがトリガーされておらず、画像がタイリングではなくフローティングのままであることを除いて、#minimalist でのみ機能するコードは次のとおりです。

EditEdit:現在のコードは次のとおりです。#containers は、グリッド レイアウトではなく単一の列としてフェードインします: http://jsfiddle.net/T6SDb/1/

石積みを呼び出す：

$( function() {

$('#container-all, #minimalist, #typographic, #abstract').masonry({
    itemSelector: '.item, .item-m, .item-t, .item-a',
    columnWidth: 7 }); });

次に、フィルターのフェードイン/フェードアウト:

$('#btn-all').click(function(e){    
$('#minimalist, #typographic').fadeOut('slow', function(){
    $('#container-all').delay(1000).fadeIn('slow', function(){
    });
});});
$('#btn-m').click(function(e){    
$('#container-all, #typographic').fadeOut('slow', function(){
    $('#minimalist').delay(1000).fadeIn('slow', function(){
        $('#container-all').masonry('layout');
    });
}); });
$('#btn-t').click(function(e){    
$('#container-all, #minimalist').fadeOut('slow', function(){
    $('#typographic').delay(2000).fadeIn('slow', function(){
        $('#container-all').masonry('layout');
    });
}); });
$('#btn-a').click(function(e){    
$('#container-all, #typographic, #minimalist').fadeOut('slow', function(){
    $('#abstract').delay(2000).fadeIn('slow', function(){
        $('#container-all').masonry('layout');
    });
}); });
4

1 に答える 1

1

選択した画像をフェードインした後、 masonary('layout') を呼び出してみてください。

$('#btn-all').click(function(e){    
    $('#minimalist, #typographic').fadeOut('slow', function(){
        $('#container-all').delay(1000).fadeIn('slow', function(){
            $('#container-all').masonry('layout');
        });
    });
});

私はこれを JavaScript コンソールからテストしているだけなので、タイミングや位置を微調整する必要があるかもしれません。フェードが終わったらやってますが、フェード開始直後にやってみるといいかもしれません。

編集

これは、コンテナの組み立て方とメーソナリーの開始方法が原因である可能性があります。おそらく、メイン ソースでこれを行うことができます。

var mason;
$( function() {
    mason = $('#container-all, #minimalist, #typographic, #abstract').masonry({
            itemSelector: '.item, .item-m, .item-t, .item-a',
            columnWidth: 7});
        });
});

その後mason.masonary('layout')、単一のコンテナーを参照するのではなく、各クリック関数で使用できます。つまり、最初の 1 つの試行では:

$('#btn-all').click(function(e){    
    $('#minimalist, #typographic').fadeOut('slow', function(){
        $('#container-all').delay(1000).fadeIn('slow', function(){
             mason.masonary('layout');
        });
    });
});

いつ物事を表示して再配置したいかによっては、特定の値に fadeTo し、レイアウトを実行してからフェードを完了したい場合があります (または遅延でそれを行うこともできます)。

メーソナリー関数hideを見て、reveal特定の要素を削除するかもしれません。

また、コンテナではなくアイテム自体を操作しやすくなり (すべてが再配置されるため)、すべての外部コンテナを 1 つだけ持つことができます。

また、より単純な例 (おそらく色付きdivの s か何か) を試して、それで作業し、まだ問題がある場合は投稿することをお勧めします。使用しているライブラリ間で相互作用が発生する場合があります。

編集 2

上記の別の変数を使用するFiddleを追加しました。masonそれは機能しますが、フェードイン/フェードアウトのタイミングについて何かをする必要があるかもしれません. それを修正する最善の方法がわかりません。

于 2013-09-03T04:38:27.510 に答える