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});    /*父容器放进来就可以了*/