いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【 jQuery 】diamonds.jsでひし形画像並べやってみた

別ページ(´・ω・`)ツこちらから【 jQuery 】diamonds.jsでひし形画像並べやってみた

デモページhttp://mqchen.github.io/jquery.diamonds.js/
zipダウンロードhttps://github.com/mqchen/jquery.diamonds.js/archive/master.zip

必要なjsとcss

<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>

 オプションscript

<script>
	$("#flickrItems").diamonds({
	    size : 200, // ダイアモンドのサイズ
	    gap :  5, // 隙間
	    hideIncompleteRow : false, // default: false 数が揃っていない場合の最後
	    autoRedraw : true, // default: true // 再描画
	    itemSelector : ".item" // アイテムのセレクタ
	});
</script>

※予め画像が用意されてたりして簡単に持って来たい場合はdemo.cssとdemo.js読み込ませば 上記はいらないです

表示するところ

<div class="diamondswrap">
    <a href="#" class="item">ひし形</a>
    <a href="#" class="item">ひし形ひし形</a>
    <a href="#" class="item">ひし形ひし形ひし形ひし形ひし形</a>
</div>

 これでいけるみたいですが、ちょっと雑ですがカスタムして指定フォルダ内の画像(png)を自動で取得して出すようにしてみた(つω`*)<めんどいからー

 カスタムデモ