Pinterest.comのdivレイアウト、具体的にはブラウザーのサイズ変更に合わせて列数を調整する方法を模索しています。垂直スタックは隣接する列の高さに依存しません。ソースコードは、各divが絶対位置であることを示しています。共同設立者は、Quoraの投稿に、カスタムjQueryとCSSを使用して行われていると回答しています。結果を左から右に並べ替えたい。あなたが自分でそれを作るために提供できる方向は大歓迎です。
この種の機能については、jQueryプラグイン Masonry も確認できます。
Pinterestスクリプトを書きました。 IDはレイアウトとは無関係で、他のインタラクション関連のJSに使用されます。仕組みの基本は次のとおりです。
予め:
アレイをセットアップします。
各ピンをループします。
結果は軽量です。 Chromeでは、50以上のピンのページ全体をレイアウトするのに10ミリ秒未満かかります。
Wookmark に対して同じ質問を何度か受け取ったため、jQueryプラグインをリリースしました。まさにこのタイプのレイアウトを作成します。ここで表示- Wookmark jQueryプラグイン
すべてのオプションを検討した結果、Pinterestに似たレイアウトを次のように実装することになりました。
すべてのDIVは次のとおりです。
div.tile {
display: inline-block;
vertical-align: top;
}
これにより、フロートに配置する場合よりも行内での配置が改善されます。
次に、ページがロードされると、JavaScriptですべてのDIVを反復して、それらの間のギャップを削除します。次の場合に許容できるほどうまく機能します。
このアプローチの利点-HTMLは検索エンジンにとって意味があり、ファイアウォールで無効化/ブロックされたJavaScriptで動作できます。HTMLの要素のシーケンスは論理シーケンス(古いアイテムより古いアイテム)に一致します
彼らはIDを持つ列でエンティティを分割し(悪い解決策...クラス名を使用する方が良い)、列グループで位置を計算します
フロートを使用し、最小幅に達するとdivが自動的に落ちるように強制的にmin-widthと共にパーセンテージを使用してdiv幅のサイズを設定できますか?私たちが取り組んでいる方法 http://www.goldtree.co.za/work