【jQuery】菱形のイメージをきれいにレイアウトできるプラグイン

菱形のイメージをグリッド配置できるJqueryのプラグイン「jquery.diamonds.js」の紹介です。イメージは横サイズを基準にマスキングしているので正方形に近いイメージを使いましょう。(横長な画像ですと下の方が欠けてしまいます。) アイデア次第ではメインヴィジュアルや、商品一覧など使えそうですね。

jquery.diamonds.js

Githubに公開されてますのでjquery.diamonds.jsより、ファイルをダウンロードしてください。

使い方はjqueryとダウンロードした「jquery.diamonds.js」「diamonds.css」を読み込ませます。

Java & css File
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.diamonds.js"></script>
<link href="./css/diamonds.css" rel="stylesheet" type="text/css">

Java Scriptでイメージのサイズやマージン等のオプションを設定します。

Java
$(document).ready(function() {
  $(".diamondswrap").diamonds({
    size : 200, //画像サイズ
    gap :  3, //マージン
	hideIncompleteRow : true, //レイアウト調整で最後のイメージを非表示にする
    autoRedraw : true, //ウィンドウサイズリサイズの際に再配置
    itemSelector : ".item" //適用するCSS
  });
});
size イメージのサイズ
gap イメージ間(マージン)の幅
hideIncompleteRow レイアウト調整で最後のイメージを非表示にする
autoRedraw ウィンドウサイズリサイズの際に再配置
itemSelector 適用するCSS

あとはHTMLを以下のように記述して完成です。

html
<div class="diamondswrap">
    <a href="#" class="item"><img src="./img/photo/001.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/002.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/003.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/004.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/005.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/006.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/007.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/008.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/009.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/010.jpg" alt=""/></a>
    <a href="#" class="item"><img src="./img/photo/011.jpg" alt=""/></a>
</div>

デモサイトでシミュレーションができますので操作してみると理解も早いと思います。

菱形でレイアウトされたWebデザイン

jquery.diamonds.jsを使ってるわけではありませんが、菱形できれいにレイアウトされたWebサイトをいくつか紹介します。
1

ヤマキウ秋田味噌 清酒太平山 小玉醸造株式会社

2

unite all originals らしさを、ぶつけろ。

3

Shopping Paseo Itaigara

4

Perspective Woodworks & Design