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

  • files
  • js
  • html
<link href="<PATH>/.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.shapeshift.min.js"></script>
<style>
	#shapeshiftDemo {
		position: relative;
	}
	#shapeshiftDemo > div {
		position: absolute;
		width: 100px;
	}
	#shapeshiftDemo > div:hover { cursor: pointer; }
	#shapeshiftDemo > .ss-placeholder-child {
		background: transparent;
		border: 2px dashed #ccc;
	}
</style>

<script>
	$(window).load(function(){
		$('#shapeshiftDemo').shapeshift();
	});
</script>


//オプション一覧
# The Basics
selector: "*"

# Features
enableDrag: true
enableCrossDrop: true
enableResize: true
enableTrash: false

# Grid Properties
align: "center"
colWidth: null
columns: null
minColumns: 1
autoHeight: true
maxHeight: null
minHeight: 100
gutterX: 10
gutterY: 10
paddingX: 10
paddingY: 10

# Animation
animated: true
animateOnInit: false
animationSpeed: 225
animationThreshold: 100

# Drag/Drop Options
dragClone: false
deleteClone: true
dragRate: 100
dragWhitelist: "*"
crossDropWhitelist: "*"
cutoffStart: null
cutoffEnd: null
handle: false

# Customize CSS
cloneClass: "ss-cloned-child"
activeClass: "ss-active-child"
draggedClass: "ss-dragged-child"
placeholderClass: "ss-placeholder-child"
originalContainerClass: "ss-original-container"
currentContainerClass: "ss-current-container"
previousContainerClass: "ss-previous-container"
<div id="shapeshiftDemo">
	<div><img src="<PATH>/img01.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img02.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd01.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img03.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img04.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd02.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img05.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img06.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd03.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img07.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img08.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd04.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img09.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img10.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd05.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img11.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img12.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd06.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img13.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img14.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd07.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img15.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img16.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd08.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img17.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img18.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/imgd09.jpg" width="100" alt=""></div>
	<div><img src="<PATH>/img11.jpg" width="100" alt=""></div>
</div>

shapeshiftについて

shapeshiftは、不揃いな要素をできるだけ隙間がなくなるように敷き詰めてくれるプラグイン。
面白いのは、要素をドラッグで移動できる点。さらに移動させるとリアルタイムに要素同士が再配置されるのでその動きを見るのも楽しい。
オプションでドラッグやアニメーションのON,OFFもできます。IE7から動くデキルやつです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Circulate

    Circulate

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

  • FlipOutCards

    FlipOutCards

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

  • gridly

    gridly

    要素を格子状に配置し、それを移動させることができる

  • color

    color

    jQueryのanimateメソッドでは実現できない色のアニメーションを可能にする

  • Vague

    Vague

    Vagueは、要素にブラーアニメーションをセットできる