1

ページに（ポートフォリオ用の）写真の基本的なレイアウトがあります。2 つの異なるサイズのイメージ ブリックがあり、大きい方が小さい方に比例し、幅と高さがちょうど 2 倍になり、ブロックまたはウィンドウの間に余白がありません。数十個の小さなブロックと混ざった数個の大きなブロックしかありません。これはレスポンシブ デザインであるため、フルサイズのサイトでは 20% の列が 5 つ、ウィンドウ サイズが特定の幅を下回ると 33.333% の列が 3 つになり、すべて 100% の最大幅のコンテナー内に収まります。画像は CSS を使用して幅 100%、高さ自動に設定され、各ブリック内にあります。私が説明していることを説明するために、ワイヤーフレームを含めました。

私が抱えている問題は、アイソトープを流体レイアウトに対応させることです。最大幅より広いウィンドウにページをロードすると、ブロックが正確に期待どおりに配置されます。ただし、ブラウザー ウィンドウを最大幅よりも小さくすると、ブロックが非常に不安定になり始めます。次のようなバリエーションがあります。間に空の列がある 2 つの列に積み重ねられます。画像間のギャップ; 大きな画像の下に空の行を残します。

私はおそらく自分自身をうまく説明していませんが、流動的なレイアウトでIsotopeを使用した経験があり、洞察を持っている人がいるかどうか疑問に思っています.

レイアウト

4

2 に答える 2

5

ここで同位体応答デモから列計算コード行を省略することで、これを達成することができました。

$container.isotope({
    itemSelector : '.thumb',
    //disable resizing
    resizable: false,
});

//update columnWidth on window resize
$(window).smartresize(function(){
    $container.isotope({
    });
});

これにより、アニメーション化された「スマート サイズ変更」機能が維持されますが、通常の css メディア クエリを使用して列の数を制御できます (メディア クエリで要素「.thumb」をコンテナーの目的のパーセンテージに設定します)。

于 2012-02-14T02:53:29.020 に答える
1

私は同様の問題を引き起こすレイアウトに取り組んでおり、Isotope の新しい packery レイアウト オプションを使用して解決しました。なんて天の恵みでしょう！— http://isotope.metafizzy.co/layout-modes/packery.html

于 2014-09-15T10:54:30.860 に答える