web-dev-qa-db-ja.com

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

Pinterest.comのdivレイアウト、具体的にはブラウザーのサイズ変更に合わせて列数を調整する方法を模索しています。垂直スタックは隣接する列の高さに依存しません。ソースコードは、各divが絶対位置であることを示しています。共同設立者は、Quoraの投稿に、カスタムjQueryとCSSを使用して行われていると回答しています。結果を左から右に並べ替えたい。あなたが自分でそれを作るために提供できる方向は大歓迎です。

jquerycsslayout
104
chrickso

この種の機能については、jQueryプラグイン Masonry も確認できます。

79
Bob.

Pinterestスクリプトを書きました。 IDはレイアウトとは無関係で、他のインタラクション関連のJSに使用されます。仕組みの基本は次のとおりです。

予め：

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

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

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

各ピンをループします。

  • 追加された時点で各ピンを最短の列に配置します
  • "left：" ===列＃（インデックス配列）×列幅+マージン
  • "top：" ===その時の最短列の配列の値（高さ）
  • 最後に、列の高さ（配列値）にピンの高さを追加します

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

183
Evan Sharp

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

57
GBKS

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

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

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

これにより、フロートに配置する場合よりも行内での配置が改善されます。

次に、ページがロードされると、JavaScriptですべてのDIVを反復して、それらの間のギャップを削除します。次の場合に許容できるほどうまく機能します。

  1. DIVの高さはそれほど変わりません。
  2. 順序の軽微な違反は気にしません（下にあった要素は上に引き上げることができます）。
  3. ボトムラインが異なる高さであってもかまいません。

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

2
esp

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

0
ant_Ti

なぜこれを試してはいけないのか、単純なjsのもの

http://Vanilla-masonry.desandro.com/index.html

または、jQueryを使用し、スクロールロードも可能です。

http://masonry.desandro.com/index.html

0
A Bright Worker

フロートを使用し、最小幅に達するとdivが自動的に落ちるように強制的にmin-widthと共にパーセンテージを使用してdiv幅のサイズを設定できますか？私たちが取り組んでいる方法 http://www.goldtree.co.za/work

0
I Am Goldtree