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等主流浏览器。
其实这也不算得上一个插件,因为通用性实在不怎样,分页功能也没实现,不过可以做个参考。(转载来的)
jQuery瀑布流插件——jQuery.Waterfall的更多相关文章
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- 瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...
- jQuery瀑布流插件masonry
项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...
- jQuery 瀑布流插件: Wookmark
原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin 翻 ...
- jQuery瀑布流插件 Masonry
http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/
- 利用jQuery来扩展一个瀑布流插件
简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...
- 基于jQuery封装一个瀑布流插件
/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 瀑布流插件(jquery.masonry.js)
什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...
随机推荐
- 记录一写Android常用API
Location.getLatitude() 纬度 Location.getLongitude() 经度 获取 运行 应用包名 顶层交互 TOP包名 主Activity //获取当前系统中 正在运行的 ...
- 安装运行Hadoop
1 准备环境 1.1 Ubuntu 或者 VMware Workstation Pro+Ubuntu 1.2 Jdk 1.3 eclipse 或其他开发工具(可选) 2 安装Hadoop 2.1 从h ...
- iOS缓存功能
之前做缓存,没有考虑过这个具体的实现. 移动应用在处理网络资源时,一般都会做离线缓存处理,其中以图片缓存最为典型,其中很流行的离线缓存框架为SDWebImage. 但是,离线缓存会占用手机存储空间,所 ...
- Java线程:线程的同步-同步方法
Java线程:线程的同步-同步方法 线程的同步是保证多线程安全访问竞争资源的一种手段. 线程的同步是Java多线程编程的难点,往往开发者搞不清楚什么是竞争资源.什么时候需要考虑同步,怎么同步等等问 ...
- idea使用心得(3)-重构初探
上一篇idea心得中,介绍了快捷键的用法.其中提及了重构神器Alt+Ctrl+Shift+T , 当时只是稍稍提及,本文重点在idea提供的重构选项.后续会有<重构,改善既有代码的设计>的 ...
- 《Git教程-廖雪峰》学习笔记
一.创建版本库 ①初始化一个Git仓库:git init ②添加文件到Git仓库:1.git add<file> ; 2.git commit 二.时光机穿梭 ①查看工作区状态,文件是否 ...
- [Python笔记]序列(一)索引、分片
Python包含6种内建序列:列表.元组.字符串.Unicode字符串.buffer对象.xrange对象. 这些序列支持通用的操作: 索引 索引是从0开始计数:当索引值为负数时,表示从最后一个元素( ...
- maven常用插件pom配置
一.问题描述: 部署一个maven打包项目时,jar包,依赖lib包全部手动上传至服务器,然后用maven部署报错:Exception in thread "main" java. ...
- Python实现简单的记账本功能
目标: 1.使用序列化cPickle 2.账户中钱要大于花费的钱,否则提示请存钱 2.编写函数,实现存钱,花钱,查询及退出功能 1.序列化 pickle是python实现序列化的模块,次模块存在使用C ...
- 磁盘io的那些事
1.使用hdparm命令 hdparm -Tt /dev/sda /dev/sda: Timing cached reads: 6676 MB in 2.00 seconds = 3340.18 M ...