問題 × 解決策

要素をひし形にして並べる「jquery.diamonds.js」

問題

要素をひし形にするには? さらにそのひし形を複数作って並べるには?

解決策

jQueryライブラリ「jquery.diamonds.js」を使う。

 

要素をひし形にするには

jQueryライブラリ「jquery.diamonds.js」を使うことで、要素をひし形にするだけでなく、並べることができます。
今回は「jquery.diamonds.js」の実装方法をご紹介します。

DEMOはこちら

ひし形を形成する

ひし形を表示

複数のひし形を並べる

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

ひし形を表示

「jquery.diamonds.js」を取得します。

まず、下記サイトにアクセスします。

【GitHub – mqchen/jquery.diamonds.js: Diamond layout.】
https://github.com/mqchen/jquery.diamonds.js

「Code」ボタンの「Download ZIP」より、「jquery.diamonds.js-master.zip」をダウンロードします。

ダウンロードしたzipファイル「jquery.diamonds.js-master.zip」を解凍します。
解凍したフォルダの中の「src」フォルダから使用するファイルは以下の2点です。

  • 「diamonds.css」をcssフォルダへコピーします。
  • 「jquery.diamonds.js」をjavascriptフォルダへコピーします。

必要なファイルの読み込み

まず、準備として、先程配置したファイルを読み込みます。

<link rel="stylesheet" href="cssフォルダ/diamonds.css" type="text/css" media="all">
<script type="text/javascript" src="javascriptフォルダ/jquery.diamonds.js"></script>

HTMLはこちら

<div class="diamonds-box single">
	<div class="items"><p>ひし形を表示</p></div>
</div>
<div class="diamonds-box multi">
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
	<div class="items"><p>ひし形を表示</p></div>
</div>

CSSはこちら

.diamonds-box .items{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	width: 140px;
	height: 140px;
	background-color: #FCECE8;
}

設定、実行するjavascriptはこちら

「要素.diamonds()」で実行します。

$(".diamonds-box.single").diamonds({
	size : 140,
	autoRedraw : true,
	itemSelector : ".items"
});
$(".diamonds-box.multi").diamonds({
	size : 140,
	gap :  3,
	autoRedraw : true,
	itemSelector : ".items"
});

ポイント!

オプションの設定により、見せ方を制御することができます。

size ひし形のサイズ
gap ひし形同士の間隔
autoRedraw 再配置させるか否か
itemSelector 並べる要素

参照

以下のサイトが、より詳しく解説してくれています。

【商品画像をひし形「ダイヤ状」に表示して並べて配置出来る「jquery.diamonds.js」 | ネットショップ運営の気になる備忘録】
https://peacepopo.net/blog-entry-140.html

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × one =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧