[JS]斜めのグリッドを使った美しいレイアウトを簡単に実装できるスクリプト -diamond.js

Post on:2013年10月16日

スタイルシートやスクリプト初心者でも簡単！
斜めのグリッドを使った美しいダイアモンド状のレイアウトを実装できるjQueryのプラグインを紹介します。

デモのキャプチャ

diamonds.js- GitHub

diamonds.jsのデモ

デモではFlickrの画像をダイアモンド状にカットし、斜めのグリッドで配置しています。

デモのキャプチャ

デモページ

デモはスクリプトのオプションを変更して、動作を確認できます。

デモのキャプチャ

画像のサイズと隙間を変更してみます。

デモのキャプチャ

sizeを250、gapを3に変更

画像はちょっと大きめ、隙間は狭くなりました。

デモのキャプチャ

オプションを変更したキャプチャ

diamonds.jsの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

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

Step 2: HTML

ダイアモンド状に配置する各アイテムのclassに「.item」を添え、ラッパーで包みます。

<div class="diamondswrap">
    <a href="#" class="item">Hello world</a>
    <a href="#" class="item">Hello</a>
    <a href="#" class="item">Hello</a>
    ... many more items!
</div>

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

$(".diamondswrap").diamonds({
    size: 250, // Size of the squares
    gap: 1 // Pixels between squares
});

オプションでは各エレメントのサイズ、隙間、

size
ダイアモンドのサイズ
gap
エレメント間の隙間
itemSelector
アイテムのセレクタ (default: .item)
hideIncompleteRow
数が揃っていない場合の最後部を隠すかどうか
autoRedraw
リサイズした際に描画しなおすかどうか

sponsors

top of page

©2024 coliss