# awesome-frontend **Repository Path**: awesome-lib/awesome-frontend ## Basic Information - **Project Name**: awesome-frontend - **Description**: A curated list of amazingly awesome frontend libraries, resources and shiny things. - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 1 - **Created**: 2020-07-06 - **Last Updated**: 2025-12-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 前端组件库 >搭建web app常用的样式/组件等收集列表(移动优先) --- - 一个常用的PHP类库, 资源以及技巧列表 [awesome-php](https://github.com/JingwenTian/awesome-php/) 推荐 --- ## 0. 前端自动化(Workflow) - 前端构建工具 - [Webpack - module bundler](https://github.com/webpack/webpack) - [Yeoman - a set of tools for automating development workflow](https://github.com/yeoman/yeoman) - [gulp - The streaming build system](http://gulpjs.com/) - [use-gulp](https://github.com/Platform-CUF/use-gulp) - [grunt - the JavaScript Task Runner](http://gruntjs.com/) - [F.I.S - 前端集成解决方案](https://github.com/fex-team/fis) - [Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集](https://github.com/google/web-starter-kit) - [node-prune](https://github.com/tj/node-prune) - Remove unnecessary files from node_modules - 前端模块管理器 - [Bower - A package manager for the web](http://bower.io/) - [Browserify](http://browserify.org/) - [Component](https://github.com/componentjs/component) - [Duo](http://duojs.org/) - [RequireJS](http://requirejs.org/) - [Sea.js](http://seajs.org/) - [LABjs - 文件加载器](https://github.com/getify/LABjs) - [css-modulesify - CSS模块加载器](https://github.com/css-modules/css-modulesify) - css预处理器 - [Less - Less is More , Than CSS](http://lesscss.org/) - [Sass - Syntactically Awesome Style Sheets](http://sass-lang.com/) - [Stylus - Expressive, dynamic, robust CSS](http://learnboost.github.io/stylus/) - 前端性能分析工具 - [analyze-css - CSS 选择器的复杂度和性能分析器](https://github.com/macbre/analyze-css) ## 1. 前端UI框架(Frameworks) - [Bootstrap](https://github.com/twbs/bootstrap) - [Foundation](https://github.com/zurb/foundation) - [Amaze UI](http://amazeui.org/) - [Semantic UI](https://github.com/semantic-org/semantic-ui) - [Pure CSS](http://purecss.io/) - [topcoat](https://github.com/topcoat/topcoat) - [UIkit](https://github.com/uikit/uikit) - [Material UI](https://github.com/callemall/material-ui) - [Materialize - 一个基于 Material Design 的 CSS 框架](https://github.com/Dogfalo/materialize) - [Framework7](http://www.idangero.us/framework7) - [mui](https://github.com/dcloudio/mui) - [ionic framework](http://ionicframework.com/) - [Fries](https://github.com/jaunesarmiento/fries) - [jQuery Mobile](http://jquerymobile.com/) - [App.js](https://github.com/kikinteractive/app) - [Office UI Fabric - 微软 Office 前端团队的框架](https://github.com/OfficeDev/Office-UI-Fabric) - [Polymer - Google发布的Web组件构建框架](https://www.polymer-project.org) - [Layui - 经典模块化前端UI框架](https://github.com/sentsin/layui/) - [wired-elements](https://github.com/wiredjs/wired-elements) - 一个有手绘效果的网页组件库 - [mustard-ui](https://github.com/kylelogue/mustard-ui) - 一个简洁、好看的 CSS 框架，压缩后只有5.28KB - [taro-ui](https://github.com/NervJS/taro-ui) - 一款基于 Taro 框架开发的多端 UI 组件库 - [alibaba/ice](https://github.com/alibaba/ice) - 飞冰是一套基于 React 的中后台应用解决方案 ## 2. JavaScript 框架汇总 - JavaScript 框架 - [react](https://github.com/facebook/react) - [ant-design](https://github.com/ant-design/ant-design) - A UI Design Language - [ant-design-mobile](https://github.com/ant-design/ant-design-mobile) - A configurable Mobile UI - [ant-design-pro](https://github.com/ant-design/ant-design-pro) - An out-of-box UI solution for enterprise applications - [Angular](https://github.com/angular/angular) - [Vue.js](https://github.com/yyx990803/vue) - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定) - [vueComponent/ant-design-vue](https://github.com/vueComponent/ant-design-vue) - An enterprise-class UI components based on Ant Design and Vue. - [awesome-vue](https://github.com/vuejs/awesome-vue) - [Element - 基于 Vue 2.0 构建了一套完整的桌面 UI 组件库](http://element.eleme.io/#/) - [Vuex - 一个专门为 Vue.js 应用设计的状态管理架构](https://github.com/vuejs/vuex) - [at-ui - 一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品](https://github.com/AT-UI/at-ui) - [Mint UI：基于 Vue.js 的移动端组件库](https://github.com/ElemeFE/mint-ui) - [Vux - 基于 Vue 和 WeUI 的 UI 组件库](https://github.com/airyland/vux) - [vonic - 基于 Vue.js 和 Ionic 的移动 UI 组件库](https://github.com/wangdahoo/vonic)    - [vuetify - vue2.0组件库](https://github.com/vuetifyjs/vuetify) - [iView - 一套基于 Vue.js 的高质量 UI 组件库](https://github.com/iview/iview) - [vue-i18n](https://github.com/kazupon/vue-i18n) - [preact](https://github.com/developit/preact/) - React 的 3kb 轻量化方案，拥有同样的 ES6 API - [jQuery](https://github.com/jquery/jquery) - [Backbone.js](https://github.com/jashkenas/backbone) - [ember.js](https://github.com/emberjs/ember.js) - [Ractive.js](https://github.com/ractivejs/ractive) - [KISSY](https://github.com/kissyteam/kissy) - [Zepto.js](https://github.com/madrobby/zepto) - [Vanilla JS](http://vanilla-js.com/) - [Can.js](http://canjs.com/guides/Utilities.html) - [Avalon](https://github.com/RubyLouvre/avalon) - [T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架](https://github.com/box/t3js/) - [jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用](https://github.com/astoilkov/jsblocks) - 轻量级JavaScript框架 - [Min.js - Super minimal selector and event library](https://github.com/remy/min.js) - [skel.js - A lightweight responsive framework](https://github.com/n33/skel) - [Sprint.js - 一个高性能、小体积的 DOM 操作库](https://github.com/bendc/sprint) - [knockout](https://github.com/knockout/knockout) - [PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API](https://github.com/ariya/phantomjs/) - 函数式反应型编程框架 FRP (Functional Reactive Programming) library - [Bacon.js - A small functional reactive programming lib for JavaScript.](https://github.com/baconjs/bacon.js/) - [Flapjax - 一个支持FRP的JavaScript框架](http://www.flapjax-lang.org/) - 混合开发框架 - [Electron](https://electronjs.org/) - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 - [React Native](https://facebook.github.io/react-native/) - 使用JavaScript和React构建原生手机APP - [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Electron应用程序样板(基于React、Redux、React Router、Webpack、React Transform HMR用于应用程序快速开发) - [Weex](https://github.com/apache/incubator-weex) - Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架 - [Flutter](https://github.com/flutter/flutter) - Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 - 微信小程序开发库 - [Tencent/weui-wxss](https://github.com/Tencent/weui-wxss) - WeUI for 小程序 为微信小程序量身设计 - [Tencent/wepy](https://github.com/Tencent/wepy) - 小程序组件化开发框架 - [youzan/vant-weapp](https://github.com/youzan/vant-weapp) - 轻量、可靠的小程序 UI 组件库 https://youzan.github.io/vant-weapp - [Meituan-Dianping/mpvue](https://github.com/Meituan-Dianping/mpvue) - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系 - [meili/minui](https://github.com/meili/minui) - 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化 - [NervJS/taro](https://github.com/NervJS/taro) - 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用 - [dcloudio/uni-app](https://github.com/dcloudio/uni-app) - 使用 Vue.js 开发跨平台应用的前端框架 http://uniapp.dcloud.io - [didi/chameleon](https://github.com/didi/chameleon) - 一套代码运行多端，一端所见即多端所见 https://CML.JS.org - [zhuanzhuanfe/fancy-mini](https://github.com/zhuanzhuanfe/fancy-mini) - 小程序代码库，封装一些常用的功能模块和ui组件。 - JavaScript 工具库 - [underscore.js](https://github.com/jashkenas/underscore) - [Underscore.string.js字符串操作库](https://github.com/epeli/underscore.string) - [functional.js](https://github.com/leecrossley/functional-js/) - [Lo-Dash - A JavaScript utility library](https://github.com/lodash/lodash) - [Lazy.js - a functional utility library for JavaScript](https://github.com/dtao/lazy.js) - [Fn.js](https://github.com/eliperelman/fn.js) - [Way.js - 双向数据绑定库](https://github.com/gwendall/way.js) - [boiler - a utility library that makes tasks in JavaScript easier](https://github.com/Xaxis/boiler) - 快捷键操作 - [KeyboardJS](https://github.com/RobertWHurst/KeyboardJS) - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts. - [mousetrap](https://github.com/ccampbell/mousetrap) - Simple library for handling keyboard shortcuts in Javascript - [Keys.js - 应用快捷键](https://github.com/bitwalker/keys.js) - [simple-hotkeys](https://github.com/mycolorway/simple-hotkeys) - [jquery.hotkeys](https://github.com/jeresig/jquery.hotkeys) - [Mousetrap - 键盘快捷键操作](https://github.com/ccampbell/mousetrap) - [AlloyLever - 移动web开发者工具面板](https://github.com/AlloyTeam/AlloyLever) ## 3. 前端游戏框架 - [cocos2d-html5](https://github.com/cocos2d/cocos2d-html5) - [Egret Engine](http://www.egret-labs.org/) - [LimeJS](https://github.com/digitalfruit/limejs) - [EaselJS](https://github.com/CreateJS/EaselJS) - [three.js](https://github.com/mrdoob/three.js) - [AlloyStick](https://github.com/AlloyTeam/AlloyStick) - [The-Best-JS-Game-Framework](https://github.com/finscn/The-Best-JS-Game-Framework) - [CanvasEngine](https://github.com/RSamaium/CanvasEngine) - [Quintus](https://github.com/cykod/Quintus) - [Stage.js](https://github.com/piqnt/stage.js/) - [phaser - 一个快速、免费、开源的 HTML5 游戏框架](https://github.com/photonstorm/phaser/) - [p2.js](https://github.com/schteppe/p2.js) - web 物理引擎 ## 4. ui组件库(CSS Framework) - [WeUI - 微信官方UI库](https://github.com/weui/weui) - [jQuery WeUI - WeUI的jQuery版本](https://github.com/lihongxun945/jquery-weui) - [GMU - 基于zepto的ui组件库，适用于移动端](https://github.com/fex-team/GMU) - [FrozenUI - 腾讯移动端组件库](https://github.com/frozenui/frozenui) - [NEC - 更好的CSS方案 ](http://nec.netease.com/) - [NEJ - 更好的JS解决方案](http://nej.netease.com/) - [Pure CSS Components](https://github.com/LFeh/css-components/) - [magic-of-css](https://github.com/adamschwartz/magic-of-css) - [Primer - The CSS toolkit and guidelines that power GitHub](https://github.com/primer/primer) - [light7 - A Light and easy to use UI Lib](https://github.com/lihongxun945/light7) - [Spectre.css - 轻量、响应式的现代 CSS 框架](https://github.com/picturepan2/spectre) - [mobi.css - 一个轻量、灵活的移动端 CSS 框架](https://github.com/xcatliu/mobi.css) ## 5. 基础模版 - 浏览器统一(Cross Browser) - [HTML5 BOILERPLATE](https://github.com/h5bp/html5-boilerplate) - [Modernizr](https://github.com/Modernizr/Modernizr) - [Normalize.css](https://github.com/necolas/normalize.css/) - [HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法](https://github.com/afarkas/html5shiv) - [cssFx - 为CSS3自动生成浏览器前缀](https://github.com/imsky/cssFx) - [-prefix-free - Break free from CSS prefix hell](https://github.com/LeaVerou/prefixfree) - [ieBetter.js - make ie browser like a morden browser main for ie6~ie8](https://github.com/zhangxinxu/ieBetter.js) - [es6-promise - Promise 对象的兼容](https://github.com/stefanpenner/es6-promise) - 响应式 - [Responsive - 响应式布局](https://github.com/ResponsiveBP/Responsive) - [Enquire.js - Awesome Media Queries in JavaScript](https://github.com/WickyNilliams/enquire.js) - [Free Wall - 创建桌面，移动和平板的动态网格布局](https://github.com/kombai/freewall) - 适配方案 - [MetaHandler.js：移动端适配各种屏幕无痛工具脚本](https://github.com/unbug/generator-webappstarter/blob/master/app/templates/app/src/util/MetaHandler.js) - [lib-flexible: 移动端自适应方案](https://github.com/amfe/lib-flexible) - [参考: 使用Flexible实现手淘H5页面的终端适配](https://github.com/amfe/article/issues/17?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) - [flexible demo 1](http://ufologist.github.io/responsive-page/others-responsive/flexible.html) - [flexible demo 2](http://huodong.m.taobao.com/act/yibo.html) - [pageResponse](https://github.com/peunzhang/pageResponse) - [responsive-page](https://github.com/ufologist/responsive-page) ## 6. 排版 - [yue.css](https://github.com/lepture/yue.css) - [typo.css](https://github.com/sofish/typo.css) - [chinese-copywriting-guidelines - 中文文案排版指南](https://github.com/sparanoid/chinese-copywriting-guidelines) ## 7. 网格系统 - [grid](https://github.com/aekaplan/grid) - [Flexbox Grid](https://github.com/kristoferjoseph/flexboxgrid) - [MasonJS - creating a perfect grid](https://github.com/DrewDahlman/Mason) ## 8. 路由和链接(Routing And URLs) - [History.js - gracefully supports the HTML5 History/State APIs](https://github.com/browserstate/history.js) - [jquery-pjax - pushState+ajax](https://github.com/defunkt/jquery-pjax) - [jquery-address - Deep Linking](https://github.com/asual/jquery-address) - [page.js - Micro client-side router](https://github.com/visionmedia/page.js) - [crossroads.js](https://github.com/millermedeiros/crossroads.js) - [hash.js](https://github.com/javve/hash.js) - [path.js](https://github.com/mtrpcic/pathjs) - [director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)](https://github.com/flatiron/director) - [URI.js](https://github.com/medialize/URI.js) - [Roadcrew.js](https://github.com/grobmeier/Roadcrew.js) - [SpeakingURL](https://github.com/pid/speakingurl) - [uparams - An URL params parser](https://github.com/YanagiEiichi/uparams) - [StateMan - 一个处理深层次单页系统的路由库](https://github.com/leeluolee/stateman) - [qs - A querystring parser with nesting support](https://github.com/ljharb/qs) - [query-string](https://github.com/sindresorhus/query-string) - Parse and stringify URL query strings ## 9. UA 识别 - [detector](https://github.com/hotoo/detector) - [ua-parser-js](https://github.com/faisalman/ua-parser-js/) - [platform.js](https://github.com/bestiejs/platform.js/) ## 10. 表单处理 ### 10.1 表单验证(Form Validator)/表单提示 - [Validator](https://github.com/niceue/validator) - [Parsley](https://github.com/guillaumepotier/Parsley.js) - [jquery.form.js - jQuery Form Plugin](https://github.com/malsup/form) - [Validform](https://github.com/haiercdboy/Validform) - [validator.js](https://github.com/sofish/validator.js) - [jquery-validation - jQuery Validation Plugin](https://github.com/jzaefferer/jquery-validation) - [formvalidator.js](https://github.com/victorjonsson/jQuery-Form-Validator) - [Fort.js – 表单填写进度提示](http://github.com/Colourity/Fort.js) - [mailcheck - 用于检测email地址的域名](https://github.com/mailcheck/mailcheck) - [Floatlable.js - 输入时显示placeholder文本](https://github.com/clubdesign/floatlabels.js) - [jQuery Label Better](https://github.com/peachananr/label_better) - [validator.js](https://github.com/ppoffice/validator.js) ### 10.2 < input > 相关 - [cleave.js - 格式化你的输入内容](https://github.com/nosir/cleave.js) ### 10.3 < select > 相关 - [Chosen](https://github.com/harvesthq/chosen) - [Select2](https://github.com/select2/select2) - [bootstrap-select](https://github.com/silviomoreto/bootstrap-select) ### 10.4 单选框/复选框相关 - [iCheck - 增强复选框和单选按钮](https://github.com/fronteed/iCheck) - [Switchery - iOS 7 style switches for your checkboxes](https://github.com/abpetkov/switchery) ### 10.5 上传组件 - [jQuery File Upload Plugin](https://github.com/blueimp/jQuery-File-Upload) - [百度 Web Uploader](http://fex-team.github.io/webuploader/) - [uploadify](http://www.uploadify.com/) - [Plupload](https://github.com/moxiecode/plupload) - [Fine Uploader](http://fineuploader.com/index.html) - [arale-upload - 轻量级 iframe and html5 file uploader](https://github.com/aralejs/upload) - [Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)](https://github.com/enyo/dropzone) - [flow.js](https://github.com/flowjs/flow.js) - [localResizeIMG - 前端本地客户端压缩图片，兼容IOS，Android，PC](https://github.com/think2011/localResizeIMG) - [simple-uploader](https://github.com/mycolorway/simple-uploader) ### 10.6 日期选择 - [tui.calendar](https://github.com/nhnent/tui.calendar) - A JavaScript calendar that everything you need. - [Both Date and Time picker widget based on twitter bootstrap](https://github.com/smalot/bootstrap-datetimepicker) - [GMU 日历组件](http://gmu.baidu.com/demo/widget/calendar/calendar.html) - [Mobiscroll](https://github.com/acidb/mobiscroll) - [Pikaday - 日期选择器](https://github.com/dbushell/Pikaday) - 价格日历 - [PriceCalendar - 酒店价格日历](https://github.com/fugm/PriceCalendar) - [API文档](http://fgm.cc/learn/calendar/price-calendar/api.html) - [DEMO](http://fgm.cc/learn/calendar/price-calendar/) - [price-calendar - 价格日历](https://github.com/wind-stone/price-calendar) - [price_calendar - 含有商品价格的日历控件](https://github.com/zhangyi5628/price_calendar) - [airbnb/react-dates](https://github.com/airbnb/react-dates) - Airbnb 的日期选择器 ### 10.7 取色 - [Colorpicker plugin for Twitter Bootstrap](https://github.com/mjolnic/bootstrap-colorpicker) - [average-color - Get Average Color of Image](https://github.com/matkl/average-color) ### 10.8 标签插件(Tag) - [TaggingJS – 可以灵活定制的 jQuery 标签系统插件](https://github.com/sniperwolf/taggingJS) - [selectize.js](https://github.com/brianreavis/selectize.js) - [Bootstrap Tags Input](https://github.com/timschlechter/bootstrap-tagsinput/) - [jQuery-Tags-Input](https://github.com/xoxco/jQuery-Tags-Input) ### 10.9 自动完成插件 - [algolia/autocomplete.js](https://github.com/algolia/autocomplete.js) - 自动补全插件 - [At.js - 一个Twitter/微博样式的@自动完成插件](https://github.com/ichord/At.js) - [jquery-textcomplete - 智能搜索提示框/自动补全](https://github.com/yuku-t/jquery-textcomplete) - [typeahead.js - a fast and fully-featured autocomplete library](https://github.com/twitter/typeahead.js) ### 10.10 样式修正 - [autosize - 使文本框自动适应所输入的内容](https://github.com/jackmoore/autosize) ## 11. 图表绘制/图形库(Graphics) - [apache/incubator-echarts](https://github.com/ecomfe/echarts) - 百度开源可视化库 - [alibaba/BizCharts](https://github.com/alibaba/BizCharts) - 阿里巴巴桌面端商业统计图表解决方案 - [antvis/f2](https://github.com/antvis/f2) - 蚂蚁金服移动端可视化解决方案 - [Highcharts](https://github.com/highslide-software/highcharts.com) - [Chart.js](https://github.com/nnnick/Chart.js) - Simple HTML5 Charts using Canvas - [Chartist.js](https://github.com/gionkunz/chartist-js) - [D3.js](https://github.com/mbostock/d3) - A JavaScript visualization library for HTML and SVG. - [intro-to-d3](https://github.com/square/intro-to-d3) - a D3.js tutorial - [Bonsai](https://github.com/uxebu/bonsai) - 一个功能强大的JavaScript图形库 - [epoch](https://github.com/fastly/epoch/) - 数据图表可视化 - [Vis.js](https://github.com/almende/vis) - [Coutour.js](https://github.com/forio/contour) - [ecomfe/zrender](https://github.com/ecomfe/zrender) - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！ - [apexcharts.js](https://github.com/apexcharts/apexcharts.js) - Interactive and Modern SVG Charts - [mapbox/mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) - MapboxGL 基于 WebGL 使用矢量切片和 Mapbox 样式渲染交互式地图 - [Kujiale-Mobile/Painter](https://github.com/Kujiale-Mobile/Painter) - 小程序生成图片库 - [canvg/canvg](https://github.com/canvg/canvg) - Javascript SVG parser and renderer on Canvas ## 12. 日期格式化 & 时间轴 - [Moment.js](http://momentjs.com/) - 日期处理 - [Day.js](https://github.com/xx45/dayjs) - 日期处理 - [Smart Time Ago](https://github.com/pragmaticly/smart-time-ago) - 显示相对时间 - [timeline.js](https://github.com/vorg/timeline.js) - [timeago.js](https://github.com/hustcc/timeago.js) - [date-utils](https://www.npmjs.com/package/date-utils) - Date Pollyfills for Node.js and Browser ## 13. 页面交互 ### 13.1 Slider - [slick - the last carousel you'll ever need](https://github.com/kenwheeler/slick/) - [Swipe - the most accurate touch slider](https://github.com/thebird/Swipe) - [Swiper - Most modern mobile touch slider](https://github.com/nolimits4web/Swiper) - [iscroll - Smooth scrolling for the web](https://github.com/cubiq/iscroll) - [iSlider - 移动端滑动组件](https://github.com/BE-FE/iSlider) - [OwlCarousel - create beautiful responsive carousel slider](https://github.com/OwlFonk/OwlCarousel) - [jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件](https://github.com/jquery/jquery-mousewheel/) - [Glide.js - 轻量级滑块组件](https://github.com/jedrzejchalubek/Glide.js) - [PhotoSwipe](https://github.com/dimsemenov/photoswipe) - [TouchSlide - 触屏滑动特效(焦点图,Tab切换)](http://www.superslide2.com/TouchSlide/) - [better-scroll](https://github.com/ustbhuangyi/better-scroll) - inspired by iscroll, and it supports more features and has a better scroll perfermance ### 13.2 瀑布流 - [Masonry](http://masonry.desandro.com/) - [Isotope - Filter & sort magical layouts](http://isotope.metafizzy.co/) - [Bricklayer](https://github.com/ademilter/bricklayer) ### 13.3 懒加载/加载监听/预加载 - [imagesLoaded](https://github.com/desandro/imagesloaded) - [Echo.js](https://github.com/toddmotto/echo) - [lazySizes](https://github.com/aFarkas/lazysizes) - [jquery_lazyload](https://github.com/tuupola/jquery_lazyload) - [BttrLazyLoading](https://github.com/shprink/bttrlazyloading/) - [lazyload.js](https://github.com/vvo/lazyload) - [layzr.js - 一个小巧快速的图片懒加载库](https://github.com/callmecavs/layzr.js) - [waitForImages - 图片加载监听库](https://github.com/alexanderdickson/waitForImages) - [PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能](https://github.com/thinkpixellab/PxLoader) - [bindWithDelay - jQuery Plugin For Delayed Event Execution](https://github.com/bgrins/bindWithDelay) - [TypeWatch - 停止输入时调用](https://github.com/dennyferra/TypeWatch) ### 13.4 图片轮播(幻灯片)/图片展示 - [FlexSlider](https://github.com/woothemes/FlexSlider) - [unslider - 小而美的轮播库](https://github.com/idiot/unslider) - [prettyPhoto](https://github.com/scaron/prettyphoto) - [FlickerPlate - A cool jQuery plugin that lets you flick through content.](https://github.com/chrishumboldt/Flickerplate) - [Holder.js - Client-side image placeholders.](https://github.com/imsky/holder) - [RowGrid.js - 在径直的行里放置图片](https://github.com/brunjo/rowGrid.js) - [ImageLightbox.js - 灯箱效果](http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/) - [JQuery Panorama Viewer - 全景视图](https://github.com/peachananr/panorama_viewer) - [Intense Images - 全屏查看图片](https://github.com/tholman/intense-images) - [Picturefill - 一个响应式图片 JS 插件](http://scottjehl.github.io/picturefill/) - [zoom.js - 一个 jQuery 图片放大插件](https://github.com/fat/zoom.js) - [watermarkjs - 一个在浏览器中添加图片水印的 JS 库](https://github.com/brianium/watermarkjs) - [responsive-images.js](https://github.com/kvendrik/responsive-images.js) - [Turntable.js - 轻易实现图像的3D旋转](https://github.com/polarnotion/turntable) - [ResponsifyJS - 让图像完全响应式而不会牺牲图像的主要部分](https://github.com/wentin/ResponsifyJS) - [react-slick - React 实现的轮播图插件](https://github.com/akiran/react-slick) ### 13.5 图片剪裁/图片处理/图片转换 - [cropperjs](https://github.com/fengyuanchen/cropperjs) - 图片裁切 - [Jcrop - Image Cropping Plugin for jQuery](https://github.com/tapmodo/Jcrop) - [croppic - an image cropping jquery plugin](https://github.com/sconsult/croppic) - [smartcrop.js - 智能图片裁剪库](https://github.com/jwagner/smartcrop.js) - [jQuery.eraser - 图像擦除插件](https://github.com/boblemarin/jQuery.eraser) - [DD_belatedPNG.js - 让IE6支持透明PNG图片](http://www.dillerdesign.com/experiment/DD_belatedPNG/) - [FocusPoint.js 实现图片的响应式裁剪](https://github.com/jonom/jquery-focuspoint) - [imgareaselect](https://github.com/odyniec/imgareaselect) - [CSSgram - CSS 实现的 Instagram 滤镜库](https://github.com/una/CSSgram) - [instagram.css - 另一个 CSS 实现的 Instagram 滤镜库](https://github.com/picturepan2/instagram.css) - [antimoderate - 图片模糊库](https://github.com/whackashoe/antimoderate) - [vue-cropper](https://github.com/xyxiao001/vue-cropper/) - Vue.js 的图片剪裁插件 - [react-cropper](https://github.com/roadmanfong/react-cropper) - React 的图片剪裁插件 - [react-image-crop](https://github.com/DominicTobias/react-image-crop) - React 的图片剪裁插件 - [rasterizeHTML.js](https://github.com/cburgmer/rasterizeHTML.js) - HTML转图片(网页截图) - [html2canvas](https://github.com/niklasvh/html2canvas) - HTML转图片(实现纯JS网页截图) - [dom-to-image](https://github.com/tsayen/dom-to-image) - HTML转图片 - [domvas](https://github.com/pbakaus/domvas) - HTML转图片 - [merge-images](https://github.com/lukechilds/merge-images) - 多张图片合成一张图片的浏览器 JS 库，使用了 Canvas ### 13.6 进度条/加载动画(Loading) - [NProgress.js](http://ricostacruz.com/nprogress/) - [progress.js](https://github.com/usablica/progress.js) - [HubSpot/pace](https://github.com/HubSpot/pace) - Pace 是一个页面加载进度条工具 - [jquery-ajax-progress](https://github.com/englercj/jquery-ajax-progress) - [nanobar](https://github.com/jacoborus/nanobar) - Very lightweight progress bars. - [waitMe](https://github.com/vadimsva/waitMe) - 很漂亮的loading效果 - [spin.js](https://github.com/fgnass/spin.js) - [sonic.js](https://github.com/padolsey/sonic.js) - [fakeLoader.js](https://github.com/joaopereirawd/fakeLoader.js) - [loaders.css](https://github.com/ConnorAtherton/loaders.css) - 一个为性能优化的实现加载动画效果的 CSS 框架 - [css-loaders](https://github.com/lukehaas/css-loaders) - [Sausage](https://github.com/christophercliff/sausage) - 跟踪滚动条并记录当前阅读所处节点 - [loading.io](https://loading.io/) - 一个 Loading 图标的网站 ### 13.7 侧滑插件(offcancas) - [pushy - a responsive off-canvas navigation menu ](https://github.com/christophery/pushy) - [Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单](https://github.com/mango/slideout) ### 13.8 菜单(Menu) - [SuperFish - 基于jQuery的级联下拉菜单](https://github.com/joeldbirch/superfish) - [Responsive Nav - 响应式导航](https://github.com/viljamis/responsive-nav.js) - [metisMenu - A jQuery menu plugin](https://github.com/onokumus/metisMenu) ### 13.9 滚动侦测(ScrollSpy) - [jquery-scrollspy(1)](https://github.com/sxalexander/jquery-scrollspy) - [jquery-scrollspy(2)](https://github.com/thesmart/jquery-scrollspy) - [Waypoints](https://github.com/imakewebthings/waypoints) - [ScrollMagic - 像进度条一样使用滚动条](https://github.com/janpaepke/ScrollMagic) ### 13.10 滚动加载更多/下拉刷新(Pull to Refresh) - [jScroll](https://github.com/pklauzinski/jscroll) - [web-pull-to-refresh](https://github.com/apeatling/web-pull-to-refresh) - [pulltorefresh](https://github.com/dwcares/pulltorefresh) - [RubberBand.js - add pull-to-refresh functionality to any page.](https://github.com/ThrivingKings/RubberBand.js) ### 13.11 平滑滚动插件(Smooth Scroll) - [jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll) - [jquery.scrollTo - 平滑滚动到页面指定位置](https://github.com/flesler/jquery.scrollTo) - [smooth-scroll](https://github.com/cferdinandi/smooth-scroll) - [scrollUp](https://github.com/markgoodyear/scrollup) - [elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件](https://github.com/tholman/elevator.js) ### 13.12 全屏滚动/全屏切换 - [pagePiling.js - 全屏滚动效果](https://github.com/alvarotrigo/pagePiling.js) - [fullPage.js](https://github.com/alvarotrigo/fullPage.js/) - [onepage-scroll](https://github.com/peachananr/onepage-scroll) - [zepto.fullpage - 专注于移动端的fullPage.js](https://github.com/yanhaijing/zepto.fullpage) - [screenfull.js - 切换全屏模式](https://github.com/sindresorhus/screenfull.js) ### 13.13 分屏滚动 - [multiscroll.js - 分屏滚动效果](https://github.com/alvarotrigo/multiscroll.js) ### 13.14 转场效果 - [Animsition - 页面切换时的过渡效果](https://github.com/blivesta/animsition) ### 13.15 固定元素(Sticky) - [sticky - jQuery Plugin for Sticky Objects](https://github.com/garand/sticky) - [jquery.pin - 固定页面元素](https://github.com/webpop/jquery.pin) - [stickUp](https://github.com/LiranCohen/stickUp) - [Slinky.js - 堆叠头部创建滑动导航列表](https://github.com/iclanzan/slinky) ### 13.16 触控事件 - [Hammer.js](https://github.com/hammerjs/hammer.js) - [jquery.event.move.js](https://github.com/stephband/jquery.event.move) ### 13.17 拖拽组件 - [Draggabilly - 专注于拖拽功能的 JS 库](https://github.com/desandro/draggabilly) - [dragula - 一个让拖放操作变简单的 JS 库](https://github.com/bevacqua/dragula) - [GridList - 可拖拉的响应式列表库](https://github.com/uberVU/grid) - [react-dnd](https://github.com/react-dnd/react-dnd) - React 拖拽组件 ### 13.18 隐藏或展示页面元素 - [Headroom.js - 在不需要页头时将其隐藏](http://www.bootcss.com/p/headroom.js/) - [Readmore.js - 内容显示与隐藏插件](https://github.com/jedfoster/Readmore.js) - [oriDomi - 像指一样折叠Dom元素](https://github.com/dmotz/oriDomi) ### 13.19 滚动条(Scrollbar) - [jScrollPane](https://github.com/vitch/jScrollPane) - [jquery.scrollbar](https://github.com/gromo/jquery.scrollbar) - [perfect-scrollbar](https://github.com/noraesae/perfect-scrollbar) - [nanoScrollerJS](https://github.com/jamesflorentino/nanoScrollerJS) - [tinyscrollbar](https://github.com/wieringen/tinyscrollbar) ### 13.20 视差滚动(Parallax Scrolling) - [parallax.js](https://github.com/wagerfield/parallax) - [jparallax](https://github.com/stephband/jparallax) - [skrollr](https://github.com/Prinzhorn/skrollr) ## 13.21 缩放 (Zooming) - [zoom.js - 一款效果很独特的页面内容缩放插件](https://github.com/hakimel/zoom.js) - [zoom.js - 一个 jQuery 图片放大插件](https://github.com/fat/zoom.js) - [jQuery Zoom - mouseover时图片缩放效果](https://github.com/jackmoore/zoom) ## 14. 代码高亮插件/代码编辑器 - [google-code-prettify](https://code.google.com/p/google-code-prettify/) - [highlight.js](https://highlightjs.org/) - [Rainbow](http://craig.is/making/rainbows) - [ACE](https://github.com/ajaxorg/ace) - [CodeMirror](https://github.com/codemirror/codemirror) - [Crayon Syntax Highlighter](https://github.com/aramk/crayon-syntax-highlighter) - [prism - Lightweight, robust, elegant syntax highlighting.](https://github.com/PrismJS/prism) ## 15. 字体图标 ( Font Icon ) - [bytedance/IconPark](https://github.com/bytedance/IconPark) - [FortAwesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式 - [simple-icons/simple-icons](https://github.com/simple-icons/simple-icons) - PNG and SVG icons for popular brands - [lipis/flag-icon-css](https://github.com/lipis/flag-icon-css) - 所有国家国旗的 icon 库 ## 16. 动画(Animate) - [SVGA](http://svga.io/index.html) - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式 - [animate.css - A cross-browser library of CSS animations.](https://github.com/daneden/animate.css) - [Transit - CSS transitions and transformations for jQuery](https://github.com/rstacruz/jquery.transit) - [anime.js - Javascript 动画引擎](https://github.com/juliangarnier/anime) - [WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)](https://github.com/matthieua/WOW) - [AniJS - A Library to Raise your Web Design without Coding](https://github.com/anijs/anijs/) - [Move.js - 简化CSS3动画的JS库](https://github.com/visionmedia/move.js) - [ScrollMe – 在网页中加入各种滚动动画效果](https://github.com/nckprsn/scrollme) - [Effeckt.css - A Performant Transitions and Animations Library](https://github.com/h5bp/Effeckt.css) - [NEC动画库](http://nec.netease.com/library/category/#animation) - [csshake - CSS classes to move your DOM](https://github.com/elrumordelaluz/csshake) - [magic - CSS3 Animations with special effects](https://github.com/miniMAC/magic) - [SpinKit](https://github.com/tobiasahlin/SpinKit) - [Velocity.js - 加速JavaScript动画](https://github.com/julianshapiro/velocity) - [lenticular.js - 响应倾斜或鼠标事件创建图片动画](https://github.com/thomasxiii/lenticular.js) - [jQuery Interactive 3D - Create a 3D interactive object using images](https://github.com/peachananr/interactive_3d) - [AnimateScroll - A Simple jQuery Plugin for Animating Scroll](https://github.com/ramswaroop/animatescroll.js) - [Blast.js - 把动画和样式注入到文本中](https://github.com/julianshapiro/blast) - [Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库](https://github.com/tictail/bounce.js) - [Sticker.js - create a Sticker Effect](https://github.com/cmiscm/stickerjs) - [scrollReveal.js - 元素进入可视区域自动触发设置好的动画](https://github.com/julianlloyd/scrollReveal.js) - [stroll.js - CSS3 list scroll effects](https://github.com/hakimel/stroll.js) - [jQuery Easing - 动画效果扩展](https://github.com/gdsmith/jquery.easing) - [animations - CSS3 ANIMATION CHEAT SHEET](http://www.justinaguilar.com/animations/index.html) - [iconate.js：将 icons 增加动画效果的 JS 库](https://github.com/bitshadow/iconate) - [Odometer - 数字之间的垂直切换](https://github.com/HubSpot/odometer) - Hover - 悬停效果 - [Hover.css - 很多鼠标Hover态的效果](https://github.com/IanLunn/Hover) - [imagehover.css - 为图片添加悬停效果](https://github.com/ciar4n/imagehover.css) - [iHover - 图片悬停效果](https://github.com/gudh/ihover) - [ImageCaptionHoverAnimation](https://github.com/hasinhayder/ImageCaptionHoverAnimation) - [Bootstrap Hover Image Gallery](http://miketricking.github.io/dist/) - Multi-touch gestures library - Web手势库 - [AlloyFinger - 腾讯 AlloyTeam 出品的超级小的 Web 手势库](https://github.com/AlloyTeam/AlloyFinger) - [VincentGarreau/particles.js](https://github.com/VincentGarreau/particles.js/) - 粒子特效 ## 17. 本地存储 - [cross-storage - Cross domain local storage](https://github.com/zendesk/cross-storage) - [localForage](https://github.com/mozilla/localForage) - [pouchdb](https://github.com/pouchdb/pouchdb) - [basil.js](https://github.com/Wisembly/basil.js) - [Neurosync - JavaScript 本地离线 ORM 库](https://github.com/ClickerMonkey/neurosync) - [LokiJS - 性能优先的 JavaScript 内存数据库](https://github.com/techfort/LokiJS) - [turbolinks - Javascript pushState](https://github.com/turbolinks/turbolinks) ## 18. 模板引擎 - [doT.js](https://github.com/olado/doT) - [mustache.js](https://github.com/janl/mustache.js) - [Handlebars.js](http://www.jingwentian.com/t-66) - [artTemplate](https://github.com/aui/artTemplate) - [baiduTemplate](https://github.com/wangxiao/BaiduTemplate) - [JSRender](https://github.com/BorisMoore/jsrender) - [EJS - JavaScript Templates](https://github.com/tj/ejs) - [Juicer - A Light Javascript Templete Engine.](https://github.com/PaulGuo/Juicer) - [Tempo](https://github.com/twigkit/tempo) - [json2html](https://github.com/moappi/json2html) - [Hogan.js - JavaScript templating from Twitter.](https://github.com/twitter/hogan.js) - [Dust.js - Linkedin维护的项目](https://github.com/linkedin/dustjs) - [nunjucks](https://github.com/mozilla/nunjucks) - A powerful templating engine ## 19. 通知组件/弹框组件/模态窗口 - [Notify.js(Web Notifications API)](https://github.com/alexgibson/notify.js) - [alertify.js](https://github.com/fabien-d/alertify.js) - [AlertifyJS](https://github.com/MohammadYounes/AlertifyJS) - [SweetAlert](https://github.com/t4t5/sweetalert) - [Messenger - 非常酷的弹框组件](https://github.com/HubSpot/messenger) - [PNotify](https://github.com/sciactive/pnotify) - [Notify.js - A simple, versatile notification library](https://github.com/jpillora/notifyjs) - [Remodal - 模态窗口插件](https://github.com/VodkaBears/Remodal) - [action.js - 极简的tip和Modal弹窗效果](https://github.com/egoist/action.js) - [Modaal - 一个创建弹出窗口的jQuery插件](https://github.com/humaan/Modaal) - [Vex - 可以实现3D动效的弹出对话框堆叠效果](https://github.com/hubspot/vex) ## 20. 提示控件(Tooltips) - [hint.css - 一款非常小巧的提示框效果](https://github.com/chinchang/hint.css) - [qTip2 - Pretty powerful tooltips](https://github.com/qTip2/qTip2) - [tooltip - CSS Tooltips](https://github.com/HubSpot/tooltip) - [tooltipster - A jQuery tooltip plugin](https://github.com/iamceege/tooltipster) - [grumble.js - 气泡形状的提示（Tooltip）控件](https://github.com/jamescryer/grumble.js) - [Ouibounce - 离站提示控件](https://github.com/carlsednaoui/ouibounce) - [intro.js - 一个创建引导式网站介绍功能的 JS 库](https://github.com/usablica/intro.js) - [data-tip.css - 纯 CSS 实现的工具提示](https://github.com/egoist/data-tip.css) ## 21. 对话框/遮罩层/弹出层(lightbox) - [fancyBox - Fancy jQuery lightbox](https://github.com/fancyapps/fancyBox) - [jquery-lightbox - The popular lightbox script, ported to jQuery](https://github.com/krewenki/jquery-lightbox) - [Colorbox - a jQuery lightbox](https://github.com/jackmoore/colorbox) - [artDialog - 经典的网页对话框组件](https://github.com/aui/artDialog) - [DialogEffects](https://github.com/codrops/DialogEffects) - [jQuery blockUI - Page or element overlay](https://github.com/malsup/blockui/) - [layer - web弹出窗/层](https://github.com/sentsin/layer/) ## 22. 文档/表格/PDF - [Backgrid.js - 强大的表格组件](https://github.com/wyuenho/backgrid) - [handsontable - 在线可编辑excel表格](https://github.com/handsontable/handsontable) - [jQuery Bootgrid - 用于ajax生成动态表格](https://github.com/rstaib/jquery-bootgrid) - [DataTables - Table plug-in for jQuery](https://github.com/DataTables/DataTables) - [PDF.js - 一个 JavaScript 编写的 PDF 阅读器](https://github.com/mozilla/pdf.js) - [jsPDF - Generate PDF files in JavaScript](https://github.com/MrRio/jsPDF) - [Recline.js - 灵活操作和展示数据](https://github.com/okfn/recline/) - [Dynatable - 交互式表格插件](https://github.com/alfajango/jquery-dynatable) - [fattable - 创建无限滚动无限行列数的表格](https://github.com/fulmicoton/fattable) - [Clusterize.js - 一个轻松显示大数据集的 JS 插件](https://github.com/NeXTs/Clusterize.js) - [Uniform -表单美化插件](https://github.com/AudithSoftworks/Uniform) - [tableExport - 导出HTML Table为 Excel、PDF 等 ](https://github.com/kayalshri/tableExport.jquery.plugin) - [SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx) - 生成Excel文件并下载 ## 23. 目录树插件 - [zTree_v3 - jQuery Tree Plugin](https://github.com/zTree/zTree_v3) - [jstree - jQuery Tree Plugin](https://github.com/vakata/jstree) - [fancytree - Tree plugin for jQuery](https://github.com/mar10/fancytree) ## 24. 前后端交互 ### 24.1 Ajax模块 - [fetch - A window.fetch JavaScript polyfill](https://github.com/github/fetch) - [reqwest - browser asynchronous http requests](https://github.com/ded/reqwest) - [ajax - Standalone AJAX library](https://github.com/ForbesLindesay/ajax) - [then-request](https://github.com/then/then-request) - [browser-request](https://github.com/iriscouch/browser-request) - [superagent](https://github.com/visionmedia/superagent) - [minAjax.js](https://github.com/argunner/minAjax.js/) - [qwest - 第三方的Ajax库](https://github.com/pyrsmk/qwest) - [axios - Promise based HTTP client for the browser and node.js](https://github.com/mzabriskie/axios) - [whatwg-fetch](https://github.com/fis-components/whatwg-fetch) - [jsonp](https://github.com/webmodules/jsonp) - A simple JSONP implementation - [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) - Isomorphic WHATWG Fetch API, for Node & Browserify ### 24.2 SSE (Server-Sent Events) > SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据. - [EventSource](https://github.com/Yaffle/EventSource) ### 24.3 Web Sockets ## 25. 音频/视频 - [videojs/video.js](https://github.com/videojs/video.js) - HTML5 & Flash video player - [videojs/http-streaming](https://github.com/videojs/http-streaming) - HLS, DASH, and future HTTP streaming protocols library for video.js - [video-dev/hls.js](https://github.com/video-dev/hls.js) - JavaScript HLS client using Media Source Extension - [Chimeejs/chimee](https://github.com/Chimeejs/chimee) - 奇舞团开源的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式 http://chimee.org/ - [paypal/accessible-html5-video-player](https://github.com/paypal/accessible-html5-video-player) - PayPal 开源的 HTML5 视频播放器 - [clappr/clappr](https://github.com/clappr/clappr) - 开源的Web视频播放器 - [sampotts/plyr](https://github.com/sampotts/plyr) - A simple HTML5, YouTube and Vimeo player - [captbaritone/webamp](https://github.com/captbaritone/webamp) - [mediaelement/mediaelement](https://github.com/mediaelement/mediaelement) - HTML5 `