javascriptで手っ取り早くPinterest風レイアウトを実現する - Qiita

ウィンドウサイズに応じて動的にいろいろ動かすってところまで対応するのはめんどくさそうだったので、レイアウトを組み立てるところまでのまとめ。 前提条件 並べる時は絶対配置で並べる (本家Pinterestも絶対配置) ウィンドウサイズをリサイズしてもカラム数は変わらない 参考サイト レイアウトを組み立てる考え方 基本的には参考サイトに書いてあるとおり。 配列を一つ用意し、カラム数分の要素を作る。 配列の中の要素は各カラムの高さ(endY)の数値を持つ。 新たに要素を並べる時には、配列の中から高さ(endY)が一番小さいカラムに対して並べる。 配列の中の要素を、新たに並べたカラムの高さ(endY)に更新する。 ※3と4を繰り返す 実装してみる function PinterestListView(listId) { var COLUMN = 4, // カラム数 MARGIN = 15, //

[typista]

javascriptで手っ取り早くPinterest風レイアウトを実現する