freetile.js--创建瀑布流式布局

1.看到花瓣网和Pinterest的网站的瀑布流布局很酷，搜了一下找到这个freetile.js插件

作为小白命是很苦的，我们先不研究轮子的制造过程，专心的装轮子，使用好各种工具。

然后等用的多了，工作能够很好的完成了。再去学习如何造轮子。

不过这次，我打算研究一下这个原理的实现过程，写个系列教程。

先看一下效果图：

2.先看一下布局

<div class="main-page">
			<div class="content-header">
				创建瀑布流布局
			</div>
			<div class="content-page">
				<div class="single-page">
					<div class="img-container">
						<img src="./img/one.jpg">
					</div>

					<div class="img-description">
						one:城市生活，仰望天空的惊喜
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/two.jpg">
					</div>

					<div class="img-description">
						two:诗和远方
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/three.jpg">
					</div>

					<div class="img-description">
						three:你的心中是否也会怀着一个世外桃源的理想
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/four.jpg">
					</div>

					<div class="img-description">
						four:蓝色的炫彩
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/five.jpg">
					</div>

					<div class="img-description">
						five:小小的邮递员
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/six.jpg">
					</div>

					<div class="img-description">
						six:不畏将来，不念过去
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/seven.jpg">
					</div>

					<div class="img-description">
						seven:萌萌的小狐狸
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/eight.jpg">
					</div>

					<div class="img-description">
						eight:聊个天吧！帅哥
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/nine.jpg">
					</div>

					<div class="img-description">
						nine:知道最强的武器是什么吗？
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="./img/ten.jpg">
					</div>

					<div class="img-description">
						ten:看我，看我
					</div>
				</div>
			</div>
		</div>

3.CSS设置

body{
	font-family:"Helvetica Neue","Microsoft Yahei";
	background-color:rgb(242, 243, 242);
	padding:0;
	margin:0;
}

.main-page{
	background-color:#eef0f1;
}

.content-header{
	text-align:center;
	height:40px;
	line-height:40px;
	font-size:16px;
	background-color: #565856;
    color: white
}



.content-page{
	margin:0px auto;
	width:100%;
}

.single-page{
	position:absolute;
	width:46%;
	margin:2%;
	background-color:white;
}

	.img-container{
		width:100%;
	}

		.img-container img{
			width:100%;
		}

	.img-description{
		color: #3c3b3b;
		width:90%;
		padding:5%;
	}

4.JS

$(".content-page").freetile({animate:true,elementDelay:30});    /*父容器放进来就可以了*/