JS实现瀑布流插件
1、基础功能实现首先定义好一个有 20 张图片的容器。

3、scroll、resize 事件监听的实现实现了初始化函数 init 以后,对 scroll 滚动事件进行监听,从而实现当滚到父节点的底部有源源不断的图片被加载出来的效果。这时候要考虑一个点,是滚动到什么位置时触发加载函数呢?当满足父容器高度 + 滚动距离 > 最后一张图片的 offsetTop这个条件,即橙色线条 + 紫色线条 > 蓝色线条时触发加载函数,代码如下:

5、resize 事件的监听与 scroll 事件监听大同小异,当触发了 resize 函数,调用 init 函数进行重置就行。使用发布-订阅模式和继承实现监听绑定既然以开发插件为目标,不能仅仅满足于功能的实现,还要留出相应的操作空间给开发者自行处理。联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取,那么加载的数据必然不能写死在库里,期望能实现如下调用(此处借鉴了 waterfall 的使用方式),

7、要让 Waterfall 能使用发布/订阅模式,只需让 Waterfall 继承 eventEmitter 函数,代码实现如下:
