pinterest.comの絶対divスタッキングレイアウトを複製する方法[終了]

104

私は、Pinterest.comのdivレイアウトを複製しようとしています。具体的には、列の数がブラウザーのサイズ変更に応じて増減するように調整し、垂直方向の積み重ねが隣接する列の高さに依存しないようにします。ソースコードは、各divが絶対位置であることを示しています。共同創設者は、カスタムjQueryとCSSで行われると述べたQuoraの投稿に回答しました。結果を左から右に並べ替えてください。あなたがそれを私自身にするためにあなたが提供できるどんな方向も大いに感謝されます。

jquery  css  layout 
— Chrickso
ソース
単純なJqueryとCSSを使用して独自にコーディングしました。これをサイズ変更で変更したい場合は、関数にラップして、コンテナー要素jsfiddle.net/92gxyugb/1
— Andrew WCブラウン

回答:

79

この種の機能については、jQuery Plug-in Masonryを確認することもできます。

— ボブ。
ソース
3
本当に素晴らしいライブラリ。今は問題なく使っています。
— AhmetB-Google
183

Pinterestスクリプトを書きました。IDはレイアウトとは関係なく、他のインタラクション関連のJSに使用されます。これがどのように機能するかの基本です：

予め：

  • ピンコンテナーを絶対的に配置する
  • 列幅を決定する
  • 列間の間隔（ガター）を決定する

アレイをセットアップします。

  • 親コンテナの幅を取得します。収まる列の数を計算する
  • 長さが列の数と等しい空の配列を作成します。この配列を使用して、レイアウトを構築するときに各列の高さを格納します。たとえば、列1の高さはarray [0]として格納されます

各ピンをループします。

  • 追加された瞬間に各ピンを最短の列に配置します
  • "左：" ===列番号（インデックス配列）と列幅+マージンの積
  • "top：" ===そのときの最短の列の配列（高さ）の値
  • 最後に、ピンの高さを列の高さに追加します（配列値）

結果は軽量です。Chromeでは、50以上のピンのページ全体をレイアウトするのに10ミリ秒未満かかります。

— エヴァン・シャープ
ソース
4
柱の高さを計算するとはどういう意味ですか？中にあるアイテムの数と高さがわからない場合、どのくらいの高さにする必要がありますか？デモ用にいくつかの疑似コードをレイアウトできる可能性はありますか？
— マイケルジョヴァンニプモ
22
ここで固体チュートリアルです- benholland.me/javascript/...
— hollandben
1
anonymusユーザーからのフィードバック（編集キューにあります）：奇妙なことに、jQueryでまったく同じスクリプトを実行しましたが、実際には1行とN列のテーブルを作成し、左から右に最短の列に追加するだけです。優先。私も追加にもかかわらず、「最小の高さの差」定数が実際に左から右に配置する列をスキップするために必要な、これはとしても、可能な限りされて高さを失うことなく、レイアウトに時系列で直感的な表示を提供します
— OERS
1
@MichaelGiovanniPumo（Pinterestの場合）レイアウトの前に高さを知っておく必要があると思います。それらには、divが重複する「初期」状態はありません。高さがわからない場合、これは実行できません。
— ptgamr 2014
1
@ hollandbenのリンクが死んで、新しいリンクは次のとおりです。benholland.me/javascript/2012/02/20/...
— Lukmo
57

Wookmarkについて同じ質問を何度も受けたため、jQueryプラグインをリリースしました。まさにこのタイプのレイアウトを作成します。ここで表示-Wookmark jQueryプラグイン

— GBKS
ソース
4
このソリューションは、組積造よりも高速にロードされるようです
— Michael L Watson
どっちがいい？wookmarkまたは石積み？
— Ramje 2013
私は石積みよりもこれを好みます、マイケルが言ったように速く見えます。
— nerdburn 2013
2

すべてのオプションを検討した結果、Pinterestと同様のレイアウトを次のように実装しました。

すべてのDIVは次のとおりです。

div.tile {
    display: inline-block;
    vertical-align: top;
}

これにより、浮いたときよりも列の位置がよくなります。

次に、ページが読み込まれると、すべてのDIVをJavaScriptで反復して、それらの間のギャップを削除します。次の場合、問題なく機能します。

  1. DIVの高さはさほど変わりません。
  2. 順序のマイナーな違反を気にしないでください（下にあったいくつかの要素は上に引き上げることができます）。
  3. 一番下の行の高さが異なっていてもかまいません。

このアプローチの利点-HTMLは検索エンジンにとって意味があり、JavaScriptがファイアウォールで無効化/ブロックされている場合に機能します。HTMLの要素のシーケンスは論理シーケンスと一致します（古いアイテムより前の新しいアイテム）。

— esp
ソース
ねえ、あなたが減算しなければならなかったオフセットをどのように計算したか教えてくれませんか？また、最後の要素が右側にあるという問題をどのように解決しましたか。少し大きい要素が1つあり、それをそこにプッシュしています。
— Lukas Oppermann 2013
@LukasOppermann 1）タイルのオフセットは、前の行の同じ列のタイルのオフセットと、前の行の最も高いタイルの高さと同じ列のタイルの高さの差の合計です。前の行。dev.sheeporpig.com/newsを見てください（開発サイトにアクセスするには、まずリンクdev.sheeporpig.com/sheep/3210をクリックする必要があります-別のファイルに圧縮されていないコメント付きのスクリプトが表示されます）、スクリプトファイルstock_news.js、関数compressTiles。
— esp 2013
@LukasOppermann 2）答えのようにCSSを使用する場合（特にdisplay：inline-block）、それは起こりません。これは、divをfloat：leftした場合にのみ発生します。私はフロートを使用しません。
— esp 2013
0

それらは、IDを持つ列によってエンティティを分割し（悪い解決策...クラス名を使用する方が良い）、列グループによって位置を計算します。

— ant_Ti
ソース
2
+1彼らのソースコードを一見するため。
— Bojangles、2011
それは私にとって興味深いものでしたが、js計算が少ないより良い解決策があると思います
— ant_Ti
私は使用することができるdisplay: inline-blockと思いますが、異なる垂直高さのアイテムは一緒に座っていません。
— ボジャングル2011
1
列コンテナー（float:left;overflow: hidden;
— div
4
いい視点ね。本当にJavaScriptのルートに行きたいのであれば、jQuery Masonryを使用できますか？
— Bojangles、2011
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.