ひし形の画像をきれいに並べる事ができる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内に読み込みます。

 

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

 

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

 

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

 

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

 

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

 

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

Related Post

topへ戻る