php ajax jquery瀑布流,jQuery瀑布流插件——jQuery.Waterfall

插件——jQuery.Waterfall

思路：

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

注意的地方：

如果瀑布流的块中包含图片，则需要事先知道图片的高度(其实就是为了要计算出整个块的高度，以便精确定位)，图片的高度可以从服务器返回，本插件是整合

实现的功能有：

定义了列宽，根据页面大小自动排列

可事先放置块。(如将一个目录栏作为瀑布流的第一块砖头放在左上角)

图片大小根据列宽等比例缩放(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等主流浏览器。

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