jQuery瀑布流插件——jQuery.Waterfall - zlix
jQuery瀑布流插件——jQuery.Waterfall
插件——jQuery.Waterfall
思路:
其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计算出列数,再维护一个数组,存储每列的高度,往最小高度的列添加块即可。滚动时,当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据。
注意的地方:
如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合planeArt的一个图片预加载小插件,可以快速获取图片的宽高,无需服务器返回。
实现的功能有:
- 定义了列宽,根据页面大小自动排列
- 可事先放置块。(如将一个目录栏作为瀑布流的第一块砖头放在左上角)
- 图片大小根据列宽等比例缩放(ie6下会失真,无法解决)
- 自定义异步请求函数(返回JSON,json格式与html模板对应即可,默认格式请看demo json.js)
- 自定义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等主流浏览器。
其实这也不算得上一个插件,因为通用性实在不怎样,分页功能也没实现,不过可以做个参考。(转载来的)
- 上一篇 »css瀑布流
- 下一篇 »jquery/原生js/css3 实现瀑布流以及下拉底部加载