こんにちは。
今回はひし形の画像をきれいに並べる事ができるjQueryプラグイン「diamonds.js」！です。

ひし形の画像をグリッド状にきれいに並べるのってCSSだと面倒ですよね。
そこで、今回はひし形の画像をきれいに並べる事ができるjQueryプラグインを紹介します。

※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。

ひし形の画像をきれいに並べる事ができるjQueryプラグイン「diamonds.js」！

diamonds.js

jQueryプラグイン「diamonds.js」をダウンロードしてみよう！

https://github.com/mqchen/jquery.diamonds.jsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

jQueryプラグイン「diamonds.js」を設置してみよう！

diamonds.cssをhead内に読み込みます。

[html] [/html]

jQuery本体とjquery.diamonds.jsを/bodyの手前に読み込みます。

[html]


[/html]

その下に下記のスクリプトを記述します。

[javascript]
$(“.diamondswrap”).diamonds({
size: 250, // Size of the squares
gap: 1 // Pixels between squares
});
[/javascript]

html部分を記述します。
先ほど指定した「diamondswrap」というidとitemというclassを付けます。

[html]

[/html]

オプションは下記のようになります。

[javascript]
$(“.diamondswrap”).diamonds({
size: 250, // 画像のサイズ
gap: 1, // マージン
itemSelector: “.item”, //適用するclass
hideIncompleteRow: true, //レイアウト調整で最後のイメージを隠すかどうか
autoRedraw: true //リサイズのした際に再配置
});
[/javascript]

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

ダイアモンド状のレイアウトを実装する時は使いたいですね。
以上でひし形の画像をきれいに並べる事ができるjQueryプラグイン「diamonds.js」！でした。