插件——jQuery.Waterfall

思路:

  其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计算出列数,再维护一个数组,存储每列的高度,往最小高度的列添加块即可。滚动时,当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据。

注意的地方:

  如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合planeArt的一个图片预加载小插件,可以快速获取图片的宽高,无需服务器返回。

实现的功能有:

  1. 定义了列宽,根据页面大小自动排列
  2. 可事先放置块。(如将一个目录栏作为瀑布流的第一块砖头放在左上角)
  3. 图片大小根据列宽等比例缩放(ie6下会失真,无法解决)
  4. 自定义异步请求函数(返回JSON,json格式与html模板对应即可,默认格式请看demo json.js)
  5. 自定义html模板

用法:

$('#id').waterfall({
itemClass: 'wf_item', // 砖块类名
imgClass: 'thumb_img', // 图片类名
colWidth: 235, // 列宽
marginLeft: 15, // 每列的左间宽
marginTop: 15, // 每列的上间宽
perNum: 'auto', // 每次下拉时显示多少个(int)(默认是列数)
isAnimation: true, // 是否使用动画效果
ajaxTimes: 'infinite', // 限制加载的次数(int) 字符串'infinite'表示无限加载
url: null, // 数据来源(ajax加载,返回json格式),传入了ajaxFunc参数,此参数将无效
ajaxFunc: null, // 自定义异步函数, 第一个参数为成功回调函数,第二个参数为失败回调函数
// 当执行成功回调函数时,传入返回的JSON数据作为参数
createHtml: null // 自定义生成html字符串函数,参数为一个信息集合,返回一个html字符串
});

本插件支持IE6+、chrome、firefox、opera、safari等主流浏览器。

其实这也不算得上一个插件,因为通用性实在不怎样,分页功能也没实现,不过可以做个参考。(转载来的)

jQuery瀑布流插件——jQuery.Waterfall的更多相关文章

  1. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  2. 瀑布流插件|jquery.masonry|使用demo

    Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

  3. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

  4. jQuery 瀑布流插件: Wookmark

    原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin 翻 ...

  5. jQuery瀑布流插件 Masonry

    http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/

  6. 利用jQuery来扩展一个瀑布流插件

      简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...

  7. 基于jQuery封装一个瀑布流插件

    /*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...

  8. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  9. 瀑布流插件(jquery.masonry.js)

    什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...

随机推荐

  1. NumberFormat DecimalFormat

    http://blog.csdn.net/evangel_z/article/details/7624503 http://blog.163.com/wangzhengquan85@126/blog/ ...

  2. How to change hostname on SLE

    修改/etc/HOSTNAME文件,在此文件中保存主机名,例如: linuxserv1 然后运行命令设置主机名 # /etc/rc.d/boot.localnet start 方法3. 运行 sysc ...

  3. Qt在pro文件中加入带空格的路径(使用$$quote关键字)

    LIBS += -L$$quote(C:\Program Files (x86)\Microsoft SDKs\Windows\v7.1A\Lib) INCLUDEPATH += $$quote(C: ...

  4. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  5. RGB转YCbCr

    从RGB转换成YCbCr //  Purpose:      //          Save RGB->YCC colorspace conversion for reuse, only co ...

  6. SQL CURSOR

    SET NOCOUNT ON; DECLARE @vendor_id int, @vendor_name nvarchar(50),     @message varchar(80), @produc ...

  7. 接入WebSocket记录

    为什么用 WebSocket 因为APP里面有个聊天功能,需要服务器主动推数据到APP.HTTP 通信方式只能由客户端主动拉取,服务器不能主动推给客户端,如果有实时的消息,要立刻通知客户端就麻烦了,要 ...

  8. Python开发【第九章】:堡垒机实例

    一.堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块基于SSH用于连接远程服务器并执行相关操作 模块安装 C:\Program Files\Python 3.5\Scri ...

  9. ASP.NET MVC WEB API字段出现k__BackingField

    参考博客:C#对 Json的序列化和反序列化会出现"k_BackingField"

  10. 关于 update别名 与update select

    正确写法:  update  别名 set 别名点字段 =xxxx UPDATE a SET a.StandardID = (SELECT b.StandardID FROM SurgeryMappi ...