Pinterest はどのようにして絶対配置による動的なグリッド レイアウトを実現しているのでしょうか?

絶対 Div スタッキング レイアウト: Pinterest の秘密を解明する

Pinterest の魅力的なグリッド レイアウトは多くの開発者からインスピレーションを得ていますが、そのシームレスな列調整と垂直方向のスタッキングには課題が生じます。ここでは、Pinterest の共同創設者の 1 人による Quora の啓示に従って、その仕組みを詳しく説明します。

絶対位置決めとカスタム スクリプト

Pinterest のレイアウト内の各 div コンテナは絶対的に配置されるため、その配置を正確に制御できます。鍵となるのは、レイアウトの動的な動作を調整するカスタム jQuery および CSS スクリプトにあります。

列とガッターの寸法の計算

div を配置する前に、スクリプトによって列が決定されます。幅と列間のマージンまたは「ガター」。これらの値は、ページに収まる列の数に影響します。

列配列による高さの追跡

各列の高さを格納するために配列が作成されます。新しい div の「上部」位置を計算するとき、スクリプトは最も短い列 (配列内で最も高さの値が小さい列) を特定し、そこに div を配置します。

動的な配置と高さの調整

「左」位置は、列番号と列幅とマージンに基づいて計算されます。 「上」の位置は、その時点で最も短い列の高さによって決まります。 div が追加されると、スクリプトは対応する列の高さの値を更新して新しい高さを反映します。

軽量で応答性が高い

このアプローチにより、応答性の高いレイアウトが得られます。ブラウザのサイズ変更やさまざまな画面サイズに効率的に調整されます。このスクリプトは、その複雑さにもかかわらず軽量であり、多数のピンを含むページ レイアウトを 10 ミリ秒未満で処理します。

絶対位置とカスタム スクリプトの複雑な相互作用を理解することで、開発者は Pinterest の視覚的に似た動的で柔軟なレイアウトを作成できます。魅力的なグリッド。

以上がPinterest はどのようにして絶対配置による動的なグリッド レイアウトを実現しているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。