ありきたりなグリッドデザインから卒業!画像をダイヤモンド状に配置するjQueryプラグイン「jquery.diamonds.js」

ありきたりなグリッドデザインから卒業!画像をダイヤモンド状に配置するjQueryプラグイン「jquery.diamonds.js」サンプル
なんかもう綺麗に四角で並べるグリッドデザイン飽きましたよね。
そこで今回紹介するのは、ダイヤモンド状に写真やテキストを配置できるjQueryプラグインのjquery.diamonds.js です。
デザインの幅も広がるのではないでしょうか。

使用方法 jquery.diamonds.js からファイル一式をダウンロード。
<link href="diamonds.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="jquery.diamonds.js"></script>
<script>
$(document).ready(function() {
$(".class名").diamonds({
size : 150, //サイズ
gap : 5, //ダイアモンド間の隙間
hideIncompleteRow : false, //最下段を個数調整するかどうか default: false
autoRedraw : true,// ウィンドウサイズを変えた時にそれにあわせて再配置するかどうか default: true
itemSelector : ".item" //並べる要素のclass名
});
});
</script>

あとは下記のように記述し、画像を表示させたい場合は背景に指定します。
<div class="class名">
<p class="item" style="background:url(画像パス1);"></p>
<p class="item" style="background:url(画像パス2);"></p>
<p class="item">wow</p>
</div>

classに高さなどを指定してあげた方がよいでしょう。
.item {
width: 150px;
height: 150px;
}

ありきたりなグリッドデザインから卒業!画像をダイヤモンド状に配置するjQueryプラグイン「jquery.diamonds.js」サンプル

sponsors

「ありきたりなグリッドデザインから卒業!画像をダイヤモンド状に配置するjQueryプラグイン「jquery.diamonds.js」」をシェアする

記事作成:
記事URL:

TOP > > > ありきたりなグリッドデザインから卒業!画像をダイヤモンド状に配置するjQueryプラグイン「jquery.diamonds.js」