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

2016/06/05

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

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

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

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

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テクニカルノート

 

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

Topへ戻る