慌慌张张，匆匆忙忙，为何生活总是这样？
难道说，我的理想，就是这样度过一生的时光？...........
真的是一年一年飞逝而去，而人的一生，又有几个一年？
第一个四年即将结束，得到了什么？又失去了什么？仔细想想，却并没有答案。而夜深人静的时候，想起四年前的自己，三年前的自己，真的和现在的自己不一样了。现在这样的我，还依旧是我吗？不知道。
不过就像《活着》这首歌中所表达的那样，生活，也许真的就是这样。又有多少人能真正实现自己的理想？又有多少人，能在岁月的洗涤中，始终带着最初的微笑呢？
没办法，这就是活着。 急不得。不管你对成功是多么渴望。
努力过好每一天，不要总是每天对未来充满幻想，因为未来的事儿，又有谁能知道呢？就像昨天追寻双塔的两万八千步的小小旅途中，谁又能知道，途中会看到那么完美的彩虹？谁又会知道，会走那么崎岖的路？
弄了半天，弄出来个很不错的效果，经典的瀑布流加无限加载！
就是，类似于百度图片加载一样，一张网页中，信息永远加载不完（当然，你首先要有那么多信息）。
这个东西不是很难做。
做出来后，又将他封装成了一个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;
$('<style></style>',{'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<jsonArr.length;i++)
{
var $ele = $(options.factory(jsonArr[i]));
for(var k=0;k<$boxList.length;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<eleList.length;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<count;i++)
{
$('<div></div>',{'class':options.listSelector.substring(1)}).appendTo($root);
}
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<ChuanQueryBean> rList = chuanUtilBean.getResultList();
sb.append("[");
for(int i=0;i<rList.size();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 '<dl>'+
'<dt>'+
'<img src="'+d.path+'" />'+
'</dt>'+
'<dd type="title">'+
'<a href="">'+d.title+'</a>'+
'</dd>'+
'<dd>'+
'<p>'+
'<a href="">'+d.username+'</a>'+
'<span>赞：<b>'+d.grtnum+'</b></span>'+
'</p>'+
'</dd>'+
'</dl>';
},
});