继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery瀑布流无限加载插件:jquery.falless.js

weibo_凌风0风灵_0
关注TA
已关注
手记 4
粉丝 2
获赞 311

慌慌张张,匆匆忙忙,为何生活总是这样?
难道说,我的理想,就是这样度过一生的时光?...........

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

不过就像《活着》这首歌中所表达的那样,生活,也许真的就是这样。又有多少人能真正实现自己的理想?又有多少人,能在岁月的洗涤中,始终带着最初的微笑呢?
没办法,这就是活着。 急不得。不管你对成功是多么渴望。
努力过好每一天,不要总是每天对未来充满幻想,因为未来的事儿,又有谁能知道呢?就像昨天追寻双塔的两万八千步的小小旅途中,谁又能知道,途中会看到那么完美的彩虹?谁又会知道,会走那么崎岖的路?


弄了半天,弄出来个很不错的效果,经典的瀑布流加无限加载!
就是,类似于百度图片加载一样,一张网页中,信息永远加载不完(当然,你首先要有那么多信息)。
这个东西不是很难做。
做出来后,又将他封装成了一个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>';
        },
    });

图片描述

打开App,阅读手记
20人推荐
发表评论
随时随地看视频慕课网APP