jquery插件有哪些(jquery插件免费下载) 收藏 0

10个最有趣的jQuery Grid插件

jQuery为广大用户提供了一种简单的方法来选择HTML元素和操作DOM，并且能更加动态、更加灵活的前端布局，据统计有95.4％的网站使用jQuery。

jQuery Grids是怎样工作的?

jQuery的网格可以为你的网站创建像Pinterest一样的布局。它像一个虚拟矩阵一样工作，并且遵循“箱内嵌”原则。 jQuery的网格动态计算出什么是项目最好的安排以及填充页面的方式，使的空白空间最少，如下图。

相比的CSS网格jQuery网格的主要优点是，它们支持图像或其它具有不同宽度和高度的媒体元素。下面介绍目前市场上10个最迷人的jQuery网格插件-当然和jQuery一样都是开源和免费的。

1. jQuery Nested

jQuery Nested提供了一个方便的多列网格布局响应，并支持所有设备类型。该jQuery插件可以说是完全无间隙的，在间隙自由度上处理得堪称完美。 jQuery Nested在填充表格矩阵中遵循独特的脚本。首先，创建了一个多列格，然后扫描矩阵间隙，并通过重新排序不同的元素来填充它们。最后-也就是使得该网格无间隙的步骤-调整在底行中与间隙不正确匹配的任何元素。

2. Freewall

Freewall允许创建你想要无论是图像的网格、嵌套网格或Metro风格的网格布局。它有许多像JavaScript变量一样可以设置的选项，如gutterX、gutterY、动画、cellW、cellH等。它还有自定义事件，如onGapFound和onResize，以及自定义方法。

3. Masonry

Masonry这个名字对于一些非常有经验的设计师来说已经再熟悉不过了。如果你还不了解，Masonry是既适用于jQuery又适用于vanilla JavaScript的级联网格布局库。 该插件以许多流行的WordPress主题为基础。你甚至不需要把它上传到你的服务器，就可以轻易直接从CDN链接到库。

Masonry可以说是建立得最好的jQuery网格，这就是为什么它有很多的选项的原因。你可以人容易在Bower或Node Package Manager上安装它。有了它的帮助你可以实现不同的网格布局，以及设置多个自定义变量、方法和事件。

4. Gridify

Gridify是一个轻量级的JavaScript插件，即可与jQuery又可与纯JavaScript一起使用。 Gridify像Pinterest一样布局。它支持加载事件，动态计算项目的宽度，并且处理具有非常长的高度的项目，还可通过CSS3的转换制作动画。

5. Shapeshift

Shapeshift是一个非常酷的拖拽jQuery网格系统。用户可以在整个页面上拖拽元素，元素每一次移动Shapeshift都为它们重组一个新的位置。 拖动事件在父容器中改变元素的索引位置。这样Spaceshift就不会使子元素的逻辑索引系统混乱。

Shapeshift在触摸设备上同样有效，因为它巧妙地利用了jQuery UITouch Punch应用程序。

本站文章除注明转载外，均为本站原创或翻译

25款开源免费的jQuery工具提示插件

Sweet Tooltip：基于 CSS3 的工具提示插件，提供多种提示风格

qTip：强大且精致的jQuery提示信息插件

Hint.CSS：采用SASS构建的纯CSS工具提示库，无需 JavaScript 代码

grumble.js：可创建球形气泡的工具提示

TIPSY：类似于Facebook的工具提示插件

响应式且移动友好性非常强的CSS jQuery工具提示插件

Opentip：开源免费的JavaScript工具提示框架

qTip2：第二代qTip

Tooltipster：jQuery HTML5工具提示插件，允许你轻松创建语义和流行的工具提示

Ajax Tooltip：Ajax工具提示脚本

gdakram：一个简单的动画悬停工具提示的jQuery插件

Hovercard：免费且轻量级的jQuery插件，可以轻松的在弹出层中显示文本、链接或者其他任何 HTML 元素的相关信息

clueTip：方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题

simpletip：一个简单的 jQuery 的工具提示(tooltip)插件，至此静态、动态以及Ajax加载的工具提示内容

Pines Notify：JavaScript通知插件，用于Bootstrap或jQuery UI

JTip：jQuery & AJAX 工具提示解决方案

(mb)Tooltip：为你的使用jQuery的页面提供的一个美丽的tooltip

Prototip2：基于Prototype框架的信息提示(tooltip)插件，提供了多样的界面效果，并且具有很高的可定制性

UniTip：一个易于实现和定制,支持多浏览的tooltip脚本

Annotator：开源jQuery文本注解插件，包含注释、标签、用户

气泡式工具提示

一个优秀的超链接鼠标悬停提示

GIPS：清洁，简单的jQuery插件，支持CSS主题

地图标签&工具提示

Profile Tooltip：一款显示个人资料的工具提示插件

12款超级有用的网页交互jQuery插件

在web前端人员，利用jQuery插件可以大大加快工作效率。不是自己写不好jQuery程序，而是我写一个jQuery可能纠结几天，即使写出来，也不是最简洁，这时候就浪费了代码的质量。一般来说前端工作人员都有自己雕刻jQuery库，是靠自己长时间的积累下，我在这里分享12款jQuery插件如下。

1. μslider网址：http://muslider.musings.it/

2.PageSlide网址：http://srobbin.com/jquery-plugins/pageslide/

3. Rcarousel网址：http://ryrych.github.io/rcarousel/

4. Evo Slider网址：http://evoslider.com/

5.jQuery HiddenPosition网址：http://www.garralab.com/hiddenposition.php

6. Stellar.js网址：http://www.garralab.com/hiddenposition.php

7. jQuery Scroll Path网址：http://joelb.me/scrollpath/

8. jQuery File Upload网址：http://blueimp.github.io/jQuery-File-Upload/

9. Mailcheck网址：https://github.com/mailcheck/mailcheck

10. Sequence.jsry网址：http://www.sequencejs.com/

11. ResponsiveSlides.js v1.32网址:http://responsive-slides.viljamis.com/

12. justgage网址：http://justgage.com/

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com