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;

            $('<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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="'+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>';
        },
    });