Pinterest のレスポンシブ Div スタッキング レイアウトを複製するにはどうすればよいですか?

Pinterest の絶対 Div スタッキング レイアウトの複製

Pinterest のユニークな div レイアウトは、その機能を複製しようとするプログラマーにとって課題となります。ブラウザのサイズ変更に基づいてレイアウトを動的に調整し、垂直方向の積み重ねの依存性を防ぐためにカスタム jQuery と CSS が使用されているため、多くの人が同様の結果を実現する方法を疑問に思っています。

答え:

Pinterest のレイアウトの背後にある中心原則には、ピン コンテナを絶対的に配置し、列の幅とガター サイズを決定し、配列を利用して各コンテナの高さを追跡することが含まれます。

1. ピン コンテナの配置:

各ピン コンテナは親コンテナ内に絶対的に配置される必要があります。これにより、個々のピンを互いに独立して配置できます。

2. 列とガターのサイズの計算:

ピン コンテナーおよびピン コンテナーに使用可能な幅を決定し、快適にフィットする列の数を計算します。結果の列幅と事前定義されたガター サイズを使用して、全体的なレイアウト パラメーターを計算します。

3. 配列ベースの高さ追跡:

配列を初期化する長さは列の数と同じです。各ピンを反復処理しながら、その時点でどの列の高さが最も低いかを判断します。この高さを対応する配列要素内に保存します。

4. ピンの配置:

各ピンを反復処理して、次の操作を行います:

• 最も短い高さ（によって決定される）の列内に配置します。
• 「left」CSS プロパティを、列の幅と余白を掛けた列インデックスに設定します。
• 「top」CSS プロパティを、配列に格納されている高さに設定します。選択した列。
• ピンの高さを追加して列の高さ (配列値) を更新します。

これらの手順に従うことで、Pinterest の応答動作と効率的なピン配置アルゴリズムを模倣したレイアウトを作成することができます。

以上がPinterest のレスポンシブ Div スタッキング レイアウトを複製するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。