2

わかりました。なぜこれが発生しているのかわかりません...ページが最初に読み込まれたとき：

http://tinyurl.com/af86wv5

アイテムをクリックするとGalleriaが起動し、最大化された画像ギャラリーが開きます。他のすべてのサムネイルアイテムは、最大化されたgalleriadivの周囲に完全に再配置されます。

しかし、ナビゲーションメニュー（上部）のアイテムの1つをクリックしてサムを再レイアウトしてフィルタリングし、それらのいずれかをクリックして最大化されたガレリア画像ギャラリーを開くと、サムネイルアイテムが周囲に配置されません。画像を適切に最大化する-ギャップ、空白の領域、不整合があります...なぜですか？

私はそれを理解することはできません。私は何を間違っている/行方不明にしていますか？

また、ページを次に最大化されたギャラリーdiv / imageにスクロールするにはどうすればよいですか？ユーザーがページの下部にあるサムネイルをクリックすると、最大化された画像がブラウザの下部の下に開きます。その特定の画像までスクロールダウンして、代わりにユーザーのブラウザの上に表示されるようにするにはどうすればよいですか。明確な焦点？

ありがとう！

4

2 に答える 2

2

$container.isotope({layoutMode:'fitRows'})ナビゲーションアイテムがクリックされたときに設定されているJSからわかります。問題はフィルタリングオプションが選択された後にのみ開始されるため、これはグリッドレイアウトに影響を与える可能性があります。この場合、問題の解決に役立ちますか...

$container.isotope({
    filter: selector,
    layoutMode : 'fitRows',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    },
});

これに置き換えられただけですか？（または、代わりに「石積み」layoutModeを使用することもできます）...

$container.isotope({
    filter: selector
});

過去の2番目のポイント（開いているアイテムへのスクロール）では、アイテムが開かれたときに関数scrollTo()内で使用しました。setTimeout()これは大雑把ですが、Isotopeがそれ自体を再配置した後、ブラウザが正しい要素の位置を見つけることができます。必要に応じて、「開く」または「閉じる」ロジックをそこに入れて、さまざまなビットを実行することもできます。

コードで従うべきもう少し論理的なものが必要な場合はscrollTo()、「transitionend」イベントにバインドして、スクロールをアニメーション化する前にIsotopeが終了していることを確認することもできます。

于 2013-02-16T13:50:17.247 に答える
0

あなたが使っposition: absolute; top: 0; left: 0;てから使うのは不思議ですtranslate3d。多分あなたはdisplay: inline-block設定せずに試してみるべきですposition。

于 2013-02-11T03:30:47.747 に答える