js特效

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script src="js/draggabilly.pkgd.min.js"></script>
<script src="js/elastiStack.js"></script>

3. HTML代碼

		<div class="container">
			<ul id="elasticstack" class="elasticstack">
				<li><img src="img/1.jpg" alt="01"/><h5>Saudade</h5></li>
				<li><img src="img/2.jpg" alt="02"/><h5>Tuqburni</h5></li>
				<li><img src="img/3.jpg" alt="03"/><h5>Retrouvailles</h5></li>
				<li><img src="img/4.jpg" alt="04"/><h5>Onsra</h5></li>
				<li><img src="img/5.jpg" alt="05"/><h5>Mamihlapinatapai</h5></li>
				<li><img src="img/6.jpg" alt="06"/><h5>Koi No Yokan</h5></li>
			</ul>
		</div><!-- /container -->
		<script>
			new ElastiStack( document.getElementById( 'elasticstack' ) );
		</script>
<div style="text-align:center;clear:both">
</div>