在web开发中经常要实现一些页面动态效果，比如图片瀑布流、图片滚动播放等效果，瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，使得页面更有吸引力。

最早采用此布局的网站是Pinterest，逐渐在国内流行开来，它的特点是整版以图片为主，大小不一的图片按照一定的规律排列，只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉，切中年轻一族的个性化心理。国内类Pinterest网站也如雨后春笋般出现，已知网站超40家，类Pinterest网站有四种，一是电商导购，如想去网、蘑菇街和美丽说、好享说、依托于淘宝平台;二是兴趣图谱分享，如知美、花瓣等;三是在细分垂直领域，如针对吃货的零食控、针对家居行业的他部落等。四是服装款式设计资讯平台如看潮网等等。

随着Pinterest网站的大量出现，图片瀑布流技术得到了广泛的应用。本站为这一热门技术推出了专门的学习课程—轻松手写实现图片瀑布流。本课程带领大家一步一步轻松手写实现图片瀑布流、图片滚动播放效果，同时夯实大家的JS基础内功，下面是该课程的课程目录。

第一章 轻松手写实现瀑布流

 1-1 普通瀑布流---布局概述   (07:26)

 1-2 普通瀑布流---布局代码实现   (05:47)

 1-3 普通瀑布流---根据视窗计算列数代码实现   (07:07)

 1-4 普通瀑布流---根据视窗计算列数代码完善   (06:34)

 1-5 普通瀑布流---第二行到最后图片排列的实现   (05:33)

 1-6 普通瀑布流---第二行到最后图片排列的实现完善   (05:43)

 1-7 自适应瀑布流---思路分析及代码实现   (03:16)

第二章 轻松手写实现图片滚动播放

 2-1 图片滚动播放---实现思路分析   (04:57)

 2-2 图片滚动播放---页面布局代码实现   (07:44)

 2-3 图片滚动播放---页面布局代码实现完善   (08:22)

 2-4 图片滚动播放---鼠标移上小图片变为完全不透明   (17:37)

 2-5 图片滚动播放---鼠标移出小图片变为半透明   (03:32)

 2-6 图片滚动播放---点击小图片显示对应大图片   (10:18)

 2-7 图片滚动播放---点击小图片显示对应大图片同时小图片进行移动   (14:10)

 2-8 图片滚动播放---点击左侧和右侧按钮时图片进行切换   (16:31)

实际上，图片瀑布流的实现方式有三种：传统多列浮动，CSS3实现以及绝对定位。我们的课程则是通过不同的实现方式来帮助我们轻松手写实现图片瀑布流。图片瀑布流的布局有效的降低了界面复杂度，节省了空间，我们不再需要臃肿复杂的页码导航链接或按钮了。与此同时，图片瀑布流的实现也给了用户更高的参与度，瀑布流的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。

好了讲了这么多，我们心中的疑惑也一扫而空。要学习图片瀑布流的小伙伴要趁早观看本站的JavaScript视频教程，我们的学习目标是通过本课程学习，掌握JS实现图片瀑布流、图片滚动播放页面效果，提高JS的编码能力，成为一名合格的前端开发者！