jQuery瀑布流插件——jQuery.Waterfall

最近在做一个项目,要用到之前比较流行的瀑布流布局,网上搜了一下,发现没有比较合适的插件可用(项目紧急,喜欢用现成的),不得不自己写一个,也可能是因为需要结合后台来实现的,所以很难写出一个通用的插件给大家用(json格式,html结构都不一样)。

偶尔在网上看到的有关瀑布流的文章(更新于2013-06-05)

瀑布流布局浅析

瀑布流布局(基于多栏列表流体布局实现)

各大瀑布流简析与建议

插件——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等主流浏览器。

其实这也不算得上一个插件,因为通用性实在不怎样,分页功能也没实现,不过可以做个参考。如果读者还有其它需求,请留言,本人会尽快完善这个插件。

文章正文已结束,感谢阅读。如果本文对您有所帮助,请点击推荐一下。

如果对本文有何建议或疑问请留言或加群讨论,前端开发交流群(75701468)

文章属于原创,如需转载请注明文章来源,不胜感激。

文章地址:http://www.cnblogs.com/leolai/archive/2013/04/23/3038159.html

蜂众网,广州蜂众网,瀑布流

posted @ 2013-04-23 16:45  无赖君子  阅读(13008)  评论(40编辑  收藏  举报