Pinterest は Div スタッキングを使用してレスポンシブ レイアウトをどのように実現しているのでしょうか?

Pinterest の独創的な Div スタッキング レイアウトがさまざまなブラウザ サイズにどのように適応するか

Pinterest の魅力的なビジュアル レイアウトは、ソーシャル メディアとしての成功に重要な役割を果たしています。メディアプラットフォーム。このレイアウトの重要な点は、隣接する列の高さに関係なく、列の数を調整して垂直方向にスタックできることです。

舞台裏: カスタム jQuery と CSS

Web サイトのコードは、このレイアウトが絶対 div 配置を使用して実現されていることを示しています。しかし、Quora の共同創設者が述べているように、Pinterest はカスタマイズされた jQuery と CSS を使用してレイアウトの動作を制御しています。

レイアウト ブループリント

巧妙に作られた jQuery スクリプト考案され、以下に依存します原則:

1. 絶対配置: 各ピン コンテナは絶対的に配置され、配置を正確に制御できます。
2. 列幅の計算:スクリプトは、親コンテナのサイズと必要な数に基づいて各列の幅を計算します。
3. 列間のマージン: 隣接する列間のマージンを表すガター値が定義されます。
4. 高さ配列: 配列が作成されます各列の高さを保存します。これは垂直方向の決定に使用されます。スタッキング。
5. ピンによるループ: 新しいピンが追加されると、スクリプトは各ピンを反復処理して、ピンを最も短い列内に配置します。
6. 座標の設定: 各ピンの左位置は、それぞれの列インデックスに列幅とガターを乗じた値に設定されます。その上部の位置は、そのインスタンスでの最も短い列の高さに対応します。
7. 高さ調整: ピンを配置した後、その高さが配列内で選択した列の高さに追加されます。

カスタム レイアウトの利点

このカスタムレイアウトにはいくつかの利点があります。

• レスポンシブ: ブラウザのサイズの変更に基づいてレイアウトが自動的に調整され、最適な表示エクスペリエンスが提供されます。
• 垂直スタッキング: 隣接する柱の高さに関係なく、ピンは垂直に積み重ねられ、格子状の構造を作成します。効果。
• 効率: スクリプトは非常に効率的であり、ページ上に複数のピンをレイアウトするのにかかる時間を短縮します。

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