example/css-animate.html

﻿<!DOCTYPE html>
<html>
	<head>
		<title>CSS Animation</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="CSS Animation" />
		<meta name="keywords" content="javascript, dynamic, grid, layout, css animate"/>
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>
		<style type="text/css">
			html {
				height: 100%;
			}

			body {
				height: 100%;
			}
			
			.free-wall {
				height: 102%;
				margin: 15px;
			}

			@keyframes start {
				from {
					transform: scale(0);
				}
				to {
					transform: scale(1);
				}
			}

			
			@-webkit-keyframes start {
				from {
					-webkit-transform: scale(0);
				}
				to {
					-webkit-transform: scale(1);
				}
			}

			.free-wall .cell[data-state="init"] {
				display: none;
			}

			.free-wall .cell[data-state="start"]  {
				display: block;
				animation: start 0.5s;
				-webkit-animation: start 0.5s;
			}

			.free-wall .cell[data-state="move"]  {
				transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
				-webkit-transition: top 0.5s, left 0.5s, width 0.5s, height 0.5s;
			}
			
		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layout.</div>
				</div>
			</div>
		</div>
		<div id="freewall" class="free-wall"></div>
		
		<script type="text/javascript">
			
			var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
			var w = 200, h = 200, html = '', limitItem = 49;
			for (var i = 0; i < limitItem; ++i) {
				html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
			}
			$("#freewall").html(html);
			
			var wall = new freewall("#freewall");
			wall.reset({
				selector: '.cell',
				animate: false,
				cellW: 200,
				cellH: 200,
				delay: 50,
				onResize: function() {
					ewall.fitWidth();
				}
			});
			wall.fitWidth();
		</script>
	</body>
</html>