• img01
  • img02
  • img03
  • img04
  • img05
  • img06
  • img07
  • img08
  • img09
  • img10
  • img11
  • img12
  • img13
  • img14

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/main.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.wookmark.min.js"></script>
<script>
	$(window).load(function(){
		$('#WookmarkDemo #tiles li').wookmark({
			container: $('#WookmarkDemo')
		});
	});
</script>
<div id="WookmarkDemo">
	<ul id="tiles">
		<li><img src="<PATH>/imgd15.jpg" width="170" alt="img01"></li>
		<li><img src="<PATH>/imgd12.jpg" width="170" alt="img02"></li>
		<li><img src="<PATH>/imgd13.jpg" width="170" alt="img03"></li>
		<li><img src="<PATH>/imgd11.jpg" width="170" alt="img04"></li>
		<li><img src="<PATH>/imgd10.jpg" width="170" alt="img05"></li>
		<li><img src="<PATH>/imgd09.jpg" width="170" alt="img06"></li>
		<li><img src="<PATH>/imgd07.jpg" width="170" alt="img07"></li>
		<li><img src="<PATH>/imgd01.jpg" width="170" alt="img08"></li>
		<li><img src="<PATH>/imgd03.jpg" width="170" alt="img09"></li>
		<li><img src="<PATH>/imgd05.jpg" width="170" alt="img10"></li>
		<li><img src="<PATH>/imgd02.jpg" width="170" alt="img11"></li>
		<li><img src="<PATH>/imgd03.jpg" width="170" alt="img12"></li>
		<li><img src="<PATH>/imgd13.jpg" width="170" alt="img13"></li>
		<li><img src="<PATH>/imgd14.jpg" width="170" alt="img14"></li>
	</ul>
</div>

Wookmarkについて

Wookmarkは、不揃いな要素たちをきれいにタイル上に敷き詰めてくれるプラグインです。
わかりやすくいうとpinterestできるプラグインです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • FlightBoard

    FlightBoard

    空港の発着情報ボードのようにパラパラパラと文字を切り替える

  • LivingFade

    LivingFade

    指定要素をランダムにフェードイン、フェードアウト

  • lodaButton

    lodaButton

    lodaButtonは、アニメーションアイコン付きのボタンを設置できる

  • Macaroon

    Macaroon

    クッキーの取得、セット、削除を簡単にできる

  • glassyWorms

    glassyWorms

    背景にミミズをはわせる