Masonryが便利だったのでご紹介します。写真のギャラリー表示や小さなサイズ違いのブロックを敷き詰めて表示したい際にリクエストされることがあるのですが、このデザインは自分でjsを組むと要件定義を含めなかなか大変です。実装は簡単なので早速ご紹介します。導入まで必要なファイルを公式サイトからダウンロードします。jsの読み込みをとmasonry用のコードを記述します。htmlとjsのサンプルを以下に記述します。$('#container').masonry({//要素を敷き詰めるブロックのidやclassを指定します。'.item'//敷き詰める要素のclassを指定します。}要素を敷き詰めるブロックを#container、要素を.itemとして記述しています。left;が必要なことに注意しましょう。オプション項目itemSelector必須のオプションになり、これによって敷き詰める要素を指定します。要素のサイズはcssで指定可能です。gutter要素と要素の隙間をピクセル単位で指定します。horizontalOrder要素の折返しルールを指定します。デフォルトはfalseで高さを基準に上に詰められれば列を無視して敷き詰められます。trueに指定するとブロックの高さに関わらず、要素は左から右に一行づつ敷き詰められます。destroymasonryを解除したいときに使用します。レスポンシブサイトなどで表示を切り替えたいときはこの記述が必要です。Masonryは便利です。顧客のニーズに合わせて効果的に利用しましょう。楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。