freetile.js--创建瀑布流式布局
1.看到花瓣网和Pinterest的网站的瀑布流布局很酷，搜了一下找到这个freetile.js插件
作为小白命是很苦的，我们先不研究轮子的制造过程，专心的装轮子，使用好各种工具。
然后等用的多了，工作能够很好的完成了。再去学习如何造轮子。
不过这次，我打算研究一下这个原理的实现过程，写个系列教程。
先看一下效果图：
2.先看一下布局
创建瀑布流布局
one:城市生活，仰望天空的惊喜
two:诗和远方
three:你的心中是否也会怀着一个世外桃源的理想
four:蓝色的炫彩
five:小小的邮递员
six:不畏将来，不念过去
seven:萌萌的小狐狸
eight:聊个天吧！帅哥
nine:知道最强的武器是什么吗？
ten:看我，看我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}); /*父容器放进来就可以了*/
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！