瀑布流布局照片墙

题记:前端猿正在学习进化过程中….

玩了两天的javscript.

先上展示

瀑布流布局照片墙作品汇总

学习过程

其实很早之前我就在慕课网学习js原生制作瀑布流的教程了,但是那时候jQuery和css的都没做过.

这两天利用空余时间玩了玩jQuery和css的实现,css3实在方便.

然后我碰到了教程最后面的编程作业, 要求之所一个分散效果的瀑布流.让图片从它一开始的位置移动到瀑布流布局的位置,让图片一张接一张.

然后我花了点时间搜索知识,一开始我想自己写移动效果的函数的,但是失败了.然后我发现了jQuery的div有一个自带的方法animate可以直接做出动画效果.

于是我又花时间去学animate方法的使用(其实没用多久),然后写到自己的代码里面,然后…调试的时间是最久的,但是结果还是有的.

我自己的折腾

在做完了慕课网教程最后的作业之后,我自己又折腾了许久的animate函数.

例如,让图片同时散开,作出一个爆炸的效果. 例如让图片从屏幕上方出现,并作出下落的动画,将其移动到指定的位置.这里的下落效果又分为两种,一种是多张一起下落,一种是一张一张下落.

在这个过程中,我又进一步了解了js的东西,也学到了许多jQuery的东西,真是收获多多.