jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

jQuery插件实现瀑布留布局masonry + infinitescroll . 使用官方的示例代码实际测试发现,当上传到服务器的时候,由于图片下载速度问题,导致图片高度不能被正确识别,从而造成层的重叠. 解决方法就是使用imagesLoaded加载. var $container = $('#flow'); $('#flow').imagesLoaded(function(){ $('#flow').masonry({ itemSelector: '.box', gutterWidth: 2…

jquery插件实现瀑布流

jquery插件实现瀑布流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .container-fluid { padding: 20px; } .box { margin-bottom: 20px; float: left; w…

jQuery插件之-瀑布流插件

jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽度发生变化的时候,它还能自适应页面宽度,非常有诚意. 查看更多瀑布流插件:http://www.csswang.com/resource/2261.html 官网地址:http://www.wookmark.com/jquery-plugin 演示地址:http://www.wookmark.com…

Web 开发最有用的50款 jQuery 插件集锦——《综合篇》

这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,系列其它文章列表如下: 您可能感兴趣的相关文章 50款最有用的 jQuery 插件集锦<表单篇> 50款最有用的 jQuery 插件集锦<图片特效篇> 50款最有用的 jQuery 插件集锦<网…

Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊. 您可能感兴趣的相关文章 50款最有用的 jQuery 插件集锦<表单篇> 50款最有用的 jQuery 插件集锦<网页布局篇> 50款最有用的 jQuery 插件集锦<内容滑块篇> 50款最有用的 jQu…

常用JQuery插件

虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己写的插件是必须有的) jquery UI(官方的UI插件,功能很多,但我只用少数几个) jQuery EasyUI jQuery LigerUI 对话框: artDialog(很欣赏这个插件,又强大又美观) AsyncBox(制作者小吴同学也是博客园的人呢) jBox(继续国人的插件,就是皮肤稍微做…

一些常用的jQuery插件

1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js Garlic.js 自动在本地保存表单文本字段的值,直到表单被提交.这样,你的用户如果不小心关闭选项卡或浏览器,也不会失去任何宝贵的数据. 3. Pickadate.js 完全响应式和轻量级的 jQuery 日期输入选择器. 4. jHERE 有了 jHERE,你可以很容易地添加互动地图到您的网站中…

jQuery插件的编写相关技术设计总结和最佳实践

原文:http://www.itzhai.com/jquery-plug-in-the-preparation-of-related-technical-design-summary-and-best-practices.html 1.声明插件名称: 添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称: jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here…

程序员们必备的10款免费jquery插件

本周带来10款免费的jquery插件.如果你也有好的作品,欢迎分享到社区中来,在得到帮助的同时,也能与更多人分享来自你的作品. jQuery导航菜单置顶插件 - stickyUp . 在线演示 stickyUp是一款可以帮助你生成置顶效果的jquery插件,如果你希望生成一个固定页面顶端的导航效果,可以使用stickUp来快速生成. 非常实用的回弹菜单在线演示这是一款实用型的菜单插件,可以用在很多地方,点击链接可以查看到在线演示并获得免费下载. 使用jQuery adaptive modal…

基于Jquery插件Uploadify实现实时显示进度条上传图片

网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考一下先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下:…

【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论前段时间领导给我看了一个网站:http://pinterest.com/, Pinterest 这个名字还算容易理解:「Pin」就是用图钉往墙上钉东西,「interest」就是趣味. 通过 Pinterest ,你可以: 1) 发现有趣的图片——设计.摄影.产品.新闻——并刺激灵感: 2) 将有趣的图片归类——…

jQuery动态网格瀑布流插件Masonry

Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonry则先垂直再横向排列元素,将下一个元素放置到上一个元素底部的网格中的下一个开发区域.这种效果可以最小化处理不同高度的元素在垂直方向的间隙. 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. 使用方法引入核心…

Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)

一.Masonry 是基于Jquery插件,用于对CSS布局的可移动层进行重新布局.Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石工处理后,变成一堵美观的墙. 官网地址:http://masonry.desandro.com 二.Infinite Scroll 是基于Infinite Scroll也是基于Jquery插件,用于当滚动条滚动时追加页面内容,有网友称这种效果为”无刷新无分页完美瀑布流”展现方式. 官网地址:http…

另外一款超棒的响应式布局jQuery插件 – Freetile.js

在线演示我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你…

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏,菜单,帮助面板,状态栏,子表单等的复杂应用程序.集成并增强其他UI小部件,如选项卡,手风琴和对话框,以创建丰富的界面. 图片发自简书App 2.jQUery Masonry 官方网站:https://masonry.desandro.c…

8个实用的页面布局和用户界面jQuery插件

网页设计师和网页开发人员在做项目的时候可能会有一些页面的布局或者对于UI有一些特定的要求.可能一些需求不能单独使用CSS就能实现的.于是很多时候开发人员都会消耗大量的时间和精力去写一些JS来协助实现.其实如果你知道一些jQuery,你会发现这些jQuery非常的好用和灵活.在这篇文章中我们分享了一些优秀实用的jQuery插件.希望可以帮助你完成一些你一直想要的东西,也希望可以提高你进行中的项目.它涉及到关于网页的布局和用户的界面. equalize.js 均衡的高度或宽度的元素的jQuery插件…

JQuery插件：动态列和无间隙网格布局Mason.js

来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason.js是一个jQuery插件,巧妙地填充了这些间隙. 当创建一个网格时候,插件就开始计算这些间隙,然后就使用预定义的元素或是在网格中复制的内容来填充这些间隙. 可以定义用于元素的大小,列/行的大小,断点的大小,或者布局是流动还是固定的. via 极客社区来源:JQuery插件:动态列和无间隙网格布…

（转）15个非常棒的jQuery无限滚动插件【瀑布流效果】

原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的内容自动加载,当你到达页面底部的.这将鼓励访客的网站停留更长的时间,并进一步阅读的网站提供更多相关的内容,无需用户任何操作自动. 从设计和可用性的角度来看,无限滚动…

15个非常棒的jQuery无限滚动插件【瀑布流效果】

现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的内容自动加载,当你到达页面底部的.这将鼓励访客的网站停留更长的时间,并进一步阅读的网站提供更多相关的内容,无需用户任何操作自动. 从设计和可用性的角度来看,无限滚动导航容易的,因为内容的加载方式,无需额外的页面加载和没有任何积极的行动,需要从访问者.有了这样的技术,无限滚动的网站有更多的机会获得比传…

jQuery无限载入瀑布流【转载】

转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流好久没更新日志了,一来我比较懒,二来最近也比较忙,惭愧啊.这次我要写的是关于瀑布流网页布局的方法,在网页布局中瀑布流算比较新颖的方式,最近我也试了一下,把本站的电影资源独立出来做了一个子站.因为电影都是以海报形式展示的,图片会比较多,瀑布流应该会比较合适,最后的完成品在这里:Wuyuan's Movie.使用jQuery实现,用到三个插件:Ma…

jquery 插件大全

1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件对话框日期 4.lhgdialog.js 对话框 5.瀑布流插件jquery.masonry.min.js 6.jquery.qrcode.js生成二维码 7.Isotope.js 动态布局 8.jquery.touchSwipe.js插件,适合手机客户端手势上下滑屏的jQuery插件 9.jquery.pagination.…

50个jQuery插件可将你的网站带到另一个高度

Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性——除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创…

40 个让你的网站更加友好的 jQuery 插件

一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对象的方法.当原型对象被扩充后,jQuery所有的对象都可以继承每一个扩充的方法. jQuery有强大的社区支持,社区里有很多技能娴熟的开发者夜以继日的创造出令人惊叹的脚本和网络应用.然而,这将增大了为你任务筛选插件的难度.这就是你为什么会看到此推荐,你将在这里找40个必须的jQuery插件集合,当你…

40个让你的网站屌到爆的jQuery插件

一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原型对象的方法.当原型对象被扩充后,jQuery所有的对象都可以继承每一个扩充的方法. jQuery 有强大的社区支持,社区里有很多技能娴熟的开发者夜以继日的创造出令人惊叹的脚本和网络应用.然而,这将增大了为你任务筛选插件的难度.这就是你为什么会看到此推荐,你将在这里找40个必须的jQuery插件集…

基于jQuery的简易瀑布流实现

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>简易瀑布流(基于多栏列表流体布局实现)</title> <style type="text/css"> .WSCWaterfall{ width: 960px; margin: 0 auto; } .WSCWaterfallCell{ margin-bottom:…

2013年优秀jQuery插件

今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示插件.3D旋转菜单等等.这些插件的官网都提供了详细的API和相关代码下载,也提供了一些案例展示,可以说稍懂一点前端的同学按照他们提供的API就会使用这些插件. 1.Makisu : jQuery CSS 3D Dropdown Menu concept Makisu是一个jQuery和css3制…

Lazy Load, 延迟加载图片的 jQuery 插件.

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 使用方法: Lazy Load 依赖于 jQuery.所有在head区域需要加入jquery和jQuery.lazyload…

JQuery插件之Jquery.datatables.js用法及api

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "…