ajax瀑布流插件,jQuery瀑布流无限加载插件：jquery.falless.js

慌慌张张，匆匆忙忙，为何生活总是这样？

难道说，我的理想，就是这样度过一生的时光？...........

真的是一年一年飞逝而去，而人的一生，又有几个一年？

第一个四年即将结束，得到了什么？又失去了什么？仔细想想，却并没有答案。而夜深人静的时候，想起四年前的自己，三年前的自己，真的和现在的自己不一样了。现在这样的我，还依旧是我吗？不知道。

不过就像《活着》这首歌中所表达的那样，生活，也许真的就是这样。又有多少人能真正实现自己的理想？又有多少人，能在岁月的洗涤中，始终带着最初的微笑呢？

没办法，这就是活着。 急不得。不管你对成功是多么渴望。

努力过好每一天，不要总是每天对未来充满幻想，因为未来的事儿，又有谁能知道呢？就像昨天追寻双塔的两万八千步的小小旅途中，谁又能知道，途中会看到那么完美的彩虹？谁又会知道，会走那么崎岖的路？

弄了半天，弄出来个很不错的效果，经典的瀑布流加无限加载！

就是，类似于百度图片加载一样，一张网页中，信息永远加载不完(当然，你首先要有那么多信息)。

这个东西不是很难做。

做出来后，又将他封装成了一个jquery插件。自我感觉还是很好用的。嘿嘿，骄傲一下！

当然，还不是很完美，和大型插件有些距离。

;(function($){

$.extend({

'falless':function(options){

options = $.extend({

'isLoop':false,

'rootSelector':'#falless',

'listSelector':'.box-list',

'pageSize':10,

'itemWidth':100,

'listMarginWidth':10,

'translateStyle':true,

'alphaStyle':true,

'translateStart':'-100px',

'translateEnd':'10px',

'alphaStart':'0',

'alphaEnd':'1',

'ajaxUrl':null,

'factory':null,

},options);

var countPosition = 0;

var $root = null;

var $minBoxList = null;

var isAjaxing=false;

var isDataEnd = false;

$('',{'type':'text/css'})

.html(options.listSelector+'{'+

'width:'+options.itemWidth+'px;'+

'float: left;'+

'margin-right:'+options.listMarginWidth+'px;'+

'}')

.appendTo('head');

function ajaxQuery(startPos,pageSize)

{

isAjaxing = true;

$.ajax({

'url':options.ajaxUrl,

'data':{

'startPos':startPos,

'pageSize':pageSize,

},

'success':function(d){

var eleList=[];

var $boxList = $root.find(options.listSelector);

var jsonArr = JSON.parse(d);

if($minBoxList == null) $minBoxList = $($boxList.get(0));

if(jsonArr.length == 0){

isDataEnd = true;

if(options.isLoop){

countPosition = 0;

isDataEnd = false;

}

}

countPosition += jsonArr.length;

for(var i=0;i

{

var $ele = $(options.factory(jsonArr[i]));

for(var k=0;k

{

if( $($boxList.get(k)).height() < $minBoxList.height() ){

$minBoxList = $($boxList.get(k));

}

}

$ele.appendTo($minBoxList);

if(options.alphaStyle) $ele.css('opacity',options.alphaStart);

if(options.translateStyle) $ele.css('margin-top',options.translateStart);

eleList.push($ele);

}

for(var i=0;i

{

if(options.alphaStyle) eleList[i].css('opacity',options.alphaEnd);

if(options.translateStyle) eleList[i].css('margin-top',options.translateEnd);

}

isAjaxing = false;

},

});

}

function init(root)

{

$root = $(root);

var w = $(root).width();

var margin = options.listMarginWidth;

var itemWidth = options.itemWidth;

var count = Math.floor(w/(margin+itemWidth));

for(var i=0;i

{

$('

}

ajaxQuery(countPosition,options.pageSize);

$(window).on('scroll',function(e){

var scrollTop = $(window).scrollTop()+$(window).height();

var minOffsetTop = 0;

if($minBoxList != null) minOffsetTop = $minBoxList.offset().top + $minBoxList.height();

if(!isAjaxing && scrollTop > minOffsetTop){

if(options.isLoop){

ajaxQuery(countPosition,options.pageSize);

}else{

if(!isDataEnd) ajaxQuery(countPosition,options.pageSize);

}

}

});

}

init($(options.rootSelector).get(0));

},

});

})(jQuery);

简简单单一百行代码而已！下面说明一下使用方法(参数说明)：

'isLoop':false, // 是否无限循环？(否的话就是数据库中的数据读完就over不加载了)

'rootSelector':'#falless', // 根元素选择器

'listSelector':'.box-list', //列元素类名

'pageSize':10, // 每次加载数据最大个数

'itemWidth':100, //列宽度

'listMarginWidth':10, //列外边距

'translateStyle':true, //是否开启滑动加载特效

'alphaStyle':true, //是否开启透明度加载特效

'translateStart':'-100px', //滑动起始位置

'translateEnd':'10px', //滑动终止位置

'alphaStart':'0', //透明度起始位置

'alphaEnd':'1', //透明度终止位置

'ajaxUrl':null, //数据请求的url

'factory':null, // 工厂函数，用于生产表现元素，参数就是一个对象

服务端被请求的页面需要为前端提供json数据，至于什么样的数据嘛，就要看自己的需求了。

例如(jsp)：

public MrActionForward doAction(HttpServletRequest req,

HttpServletResponse resp) throws ServletException, IOException {

int startPos = Integer.parseInt(req.getParameter("startPos"));

int pageSize = Integer.parseInt(req.getParameter("pageSize"));

PrintWriter out = resp.getWriter();

StringBuilder sb = new StringBuilder();

ChuanQueryUtilBean chuanUtilBean = new ChuanQueryUtilBean(startPos, pageSize);

List rList = chuanUtilBean.getResultList();

sb.append("[");

for(int i=0;i

{

sb.append("{");

sb.append("\"id\":");

sb.append(rList.get(i).id+",");

sb.append("\"username\":");

sb.append("\""+MrUtil.X11N.toClientParam(rList.get(i).username)+"\""+",");

sb.append("\"title\":");

sb.append("\""+MrUtil.X11N.toClientParam(rList.get(i).title)+"\""+",");

sb.append("\"grtnum\":");

sb.append(rList.get(i).grtnum+",");

sb.append("\"path\":");

sb.append("\""+MrUtil.X11N.toClientParam(rList.get(i).path)+"\"");

sb.append("},");

}

String res = sb.length()==1?"[]":sb.substring(0, sb.length()-1)+"]";

Pattern CRLF = Pattern.compile("(\r\n|\r|\n|\n\r)");

Matcher m = CRLF.matcher(res);

if(m.find()){

res = m.replaceAll("");

}

out.print(res);

return null;

}

注意，服务端接受的参数必须有 startPos(起始位置)，pageSize(页面大小)，用于在数据库获取数据。

调用的话，示例如下：

$.falless({

isLoop:true,

alphaStyle:true,

translateStyle:true,

itemWidth:240,

rootSelector:'#main',

ajaxUrl:'chuanQuery.mr',

factory:function(d){

return '

'

'+

''+

''+

'

'+

''+d.title+''+

''+

'

'+

'

'+

''+d.username+''+

'赞：'+d.grtnum+''+

'

'+

'

'+

'';

},

});