最近、特に女性に人気があるPinterest(ピンタレスト)。
その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。

Pinterest(ピンタレスト)は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。

そのPinterest(ピンタレスト)風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。

サンプルページを作ってみました。

→ Pinterest(ピンタレスト)風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル

jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。


【使用方法】

まずは、こちらの本家のサイトからBlocksIt.jsなど一式ダウンロードします。
<head>部分にcssとJavaScriptを記述します。

最後に<body>部に画像を記述すれば完成です。

※オプションがいくつか用意されているので、様々な効果を付けることも可能です。

.BlocksIt( [Options] )

[Options]

  • numOfCol:
    Type: Int Default: 5
    コラム数を設定します。
  • offsetX:
    Type: Int Default: 5
    ブロックの左右のマージン幅
  • offsetY:
    Type: Int Default: 5
    ブロックの上下のマージン幅
  • blockElement:
    Type: String Default: ‘div’

オプションの記述の例

以下にサンプルページのソースを書いておきます。サンプルではウィンドウズ幅に応じてコラム数を変更させています。どうぞご参考までに。
(画像の数が多いので6枚目以降の画像指定の部分は省略しています。)

この記事と関連してると思われる記事: