前端常用插件、工具类库汇总，不要重复造轮子啦！！！

在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。

下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。 ^_^

可以先加个收藏（Ctrl + D），以后遇到类似的场景就来看看具体的插件及其用法。

另外，不要重复造轮子，把精力放在业务逻辑上！

函数库

Lodash（推荐）： github.com/lodash/loda…

Underscore：underscorejs.org/

Ramda： github.com/ramda/ramda

outils： github.com/proYang/out…

30-seconds-of-code： github.com/Chalarangel…

动画库

Animate.css

• CSS3 动画库，也是目前最通用的动画库。
• daneden.github.io/animate.css…

Anime.js：

• 一个强大的、轻量级的用来制作动画的javascript库
• animejs.com/

Hover.css：

• CSS hover 悬停效果，可以应用于链接、按钮、图片等等。
• github.com/IanLunn/Hov…

wow.js:

• 滚动展示动画
• WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果。
• github.com/matthieua/W…

scrollReveal.js：

• 类似 wow.js
• github.com/jlmakes/scr…

Magic.css：

• css3 animation动画库
• github.com/miniMAC/mag…

Waves：

• 点击波纹效果
• github.com/fians/Waves

move.js：

• 一个小型的JavaScript库，通过JS来控制一系列的CSS动画顺序执行，使CSS3动画变得非常简单和优雅。
• github.com/visionmedia…

Velocity.js：

• 一个功能齐全的 JavaScript 动画套件，包括诸如淡入淡出、滚动、滚动、停止、结束、翻转等动画效果。
• github.com/julianshapi…

滚动库

iscroll - 平滑滚动插件： github.com/cubiq/iscro…

BetterScroll：

• github.com/ustbhuangyi…
• iscroll 的优化版，使移动端滑动体验更加流畅

animatescroll：

• jQuery滚动到指定位置
• plugins.compzets.com/animatescro…

crossfade.js：

• jQuery图片模糊插件crossfade.js
• www.dowebok.com/104.html

jQuery Scrollbox：

• 图片文字滚动插件
• www.jq22.com/jquery-info…

liMarquee：

• jQuery无缝滚动插件
• www.dowebok.com/188.html

轮播图

Swiper：

• 常用于移动端网站的内容触摸滑动
• www.swiper.com.cn/

iSlider：

• 移动端滑动组件
• eux.baidu.com/iSlider/dem…

slip.js：

• 移动端跟随手指滑动组件，零依赖。
• github.com/binnng/slip…

OwlCarousel2： owlcarousel2.github.io/OwlCarousel…

slick： www.jq22.com/jquery-info…

myFocus： www.cosmissy.com/myfocus/tut…

WebSlides： github.com/webslides/w…

jQuery轮播插件slider： www.jq22.com/jquery-info…

滚屏

fullpage： www.jq22.com/jquery-info…

弹出框

layer：

• layer.layui.com/
• layui 独立维护的三大组件之一（layDate、layer、layim）
• 尽管 layui 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui 中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。

Bootbox.js：bootboxjs.com/

dialogBox：

• 基于 jQuery
• www.jq22.com/jquery-info…

easyDialog： www.h-ui.net/easydialog-…

消息通知

Notyf：

• 简单的响应式纯js消息通知插件
• www.htmleaf.com/jQuery/Ligh…

PNotify：

• 页面右上角的提示信息（非弹框提示）
• sciactive.com/pnotify/
• sciactive.github.io/pnotify/
• github.com/sciactive/p…

overhang.js：

• www.jq22.com/jquery-info…
• overhang.js 是一个JQuery插件显示即时通知、 确认或给定元素中的提示。

下拉框

select2：select2.org/

级联选择器

ustbhuangyi/picker

• github.com/ustbhuangyi…
• 移动端最好用的的筛选器组件、联动筛选

jQueryDistpicker：

• fengyuanchen.github.io/distpicker/
• www.jq22.com/demo/jQuery…

颜色选择器

Bootstrap Colorpicker 2： github.com/farbelous/b…

时间选择器

layDate： www.layui.com/laydate/

wdatepicker

时间日期处理

Moment.js：

• Moment.js 是一个解析，验证，操作和显示日期和时间的 JavaScript 类库。
• momentjs.com
• github.com/moment/mome…

timeago.js：

• 轻量级的时间转换 Javascript 库
• github.com/hustcc/time…

表单验证

validator.js： github.com/chriso/vali…

jQuery Validation

• jQuery 表单校验
• github.com/jquery-vali…

Validation Plugin：

• jQuery插件
• www.imooc.com/learn/385

Validform：

• 一行代码搞定整站的表单验证！- Jquery表单验证插件
• validform.rjboy.cn/

分页插件

pagination： github.com/superRaytin…

富文本编辑器

wangEditor： ueditor.baidu.com/website/

百度UEditor： ueditor.baidu.com/website/

CKEditor：ckeditor.com/

KindEditor： kindeditor.net/demo.php

MediumEditor： yabwe.github.io/medium-edit…

Simditor：simditor.tower.im/

Summernote：summernote.org/

树插件

www.treejs.cn

图片懒加载

lazyload： github.com/tuupola/jqu…

瀑布流

Masonry： www.cnblogs.com/cjc917/p/74…

Metro风兼瀑布流布局效果http://www.lanrenzhijia.com/jquery/1985.html