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

  • files
  • js
  • html
<link href="<PATH>/jquery.gridly.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.gridly.js"></script>
<style>
	#gridlyDemo {
		position: relative;
		width: 810px;
		margin: 50px auto;
	}
	#gridlyDemo .gridly-demo {
		opacity: 1;
		cursor: pointer;
		position: relative;
	}
	#gridlyDemo .gridly-demo .delete {
		display: block;
		color: #333;
		background: rgba(255, 255, 255, 0.5);
		width: 40px;
		height: 40px;
		top: 0;
		right: 0;
		position: absolute;
		text-align: center;
		line-height: 40px;
	}
	#gridlyDemo .gridly-demo .delete:hover {
		text-decoration: none;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
	}
	#gridlyDemo .gridly-demo {
		width: 150px;
		height: 150px;
		overflow: hidden;
	}
	#gridlyDemo .gridly-demo img {
		width: auto;
		height: 150px;
	}
	#gridlyDemo .gridly-demo.dragging {
		opacity: 0.8;
	}
</style>
<script>
	$(window).load(function(){
		var $griDemo = $('#gridlyDemo');
			var _eleCount = 0;
			for(var i=0; i<=30; i++) {
				gridlyFunc01(_eleCount);
			}
				
			$('#gridlyDemo').gridly({
				base: 50,
				gutter: 5,
				columns: 14
			});
			$(document).on('click', '#gridly #gridlyBtn', function(event) {
				event.preventDefault();
				event.stopPropagation();
				gridlyFunc01(_eleCount);
				return $('#gridlyDemo').gridly({
					base: 50,
					gutter: 5,
					columns: 14
				});
			});
			$(document).on('click', '#gridlyDemo .gridly-demo .delete', function(event) {
				var $this;
				event.preventDefault();
				event.stopPropagation();
				$this = $(this);
				$this.closest('.gridly-demo').remove();
				return $('#gridlyDemo').gridly({
					base: 50,
					gutter: 5,
					columns: 14
				});
			});
			
			function gridlyFunc01(_count) {
				$griDemo.append('<div class="gridly-demo small" data-count="' + _count + '"><img src="" alt=""><a class="delete" href="#">×</a></div>');
				_num = Math.floor(Math.random() * 18)+1;
				if(_num < 10) _num = '0' + String(_num);
				$griDemo.find('.gridly-demo[data-count="' + _count + '"] img').attr('src', '[tempd]/images/jquery-plugin/imgb' + _num + '.jpg');
				_eleCount++;
			}
	});
</script>
<div id="gridlyDemo"></div>
<button id="gridlyBtn" class="yellow">ADD!!</button>

gridlyについて

gridlyは、要素を格子状に配置し、それを移動させることができるプラグインです。
画像のギャラリーサイトとかに使うとインタラクティブなサイトが簡単にできそうですね。
IE9+から動きますが、グリッドの再配置時のアニメーションはIE10+になります。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • shapeshift

    shapeshift

    不揃いな要素をできるだけ隙間がなくなるように敷き詰めてくれる

  • Circulate

    Circulate

    Circulateは、要素をサークル状に回転させることができる

  • kwicks

    kwicks

    スライドパネルでマウスオーバーした要素の高さ、幅をミョーンと伸ばしてくれる

  • FlipOutCards

    FlipOutCards

    複数の要素をフリップアニメーションで表示できる

  • Sticker

    Sticker

    Stickerは、壁に貼ったステッカーを剥がすような動きを表現できる