高さの異なるブロック要素を左上から右下へタイル状に隙間なく並べる方法を紹介します。
HTML
補足
- サンプルでは "album" という id 名を付けた div 要素内に、並べ替える元のリストを記述しています。
jQuery
補足
- function masonry(s, n) という関数で並べ替えます。引数の s には、元のリストを包む div 要素の id 名を指定し、引数の n には並べ替え後のカラム数を指定します。
- この関数では、引数で指定されたカラム数分の新しいリストを作成し、それを横並びにしたあと、各リストの中へ元リストの項目をコピーしながら振り分けています（元のリストは CSS で非表示にしています）。
- サンプルではウィンドウ幅を変えると、カラム数が変わるように指定しています。
CSS
補足
- jQuery の処理で並び変わる前に、一瞬元のリストが縦一列に表示されてしまうので、 CSS で非表示にしています。