写了个jquery瀑布流插件 , 求各位道友猛男指点指点

如题 ,请各位大佬指点一下

;;(function(){
    if(typeof jQuery === "function"){
        (function( factory , $ ){
            if($.fn.jquery.split(".")[0] >= 1){
                factory( $ )
            }
        })(function( $ ){
            $.waterFall = function( options ){
                var _default = {
                    delay : 100,
                    advance_load : 500,
                    start : 0,
                    col : 4,
                    interval : 20
                }
                options = $.extend( _default , options );
                $(function(){
                    function init(){
                        init.height_list = [];
                        init.start = options.start;
                        init.eles_length = 0;
                        $(document).scrollTop(0);
                        bindEvent()
                    };
                    function bindEvent(){
                        loadPic(init.start)
                        $(document).on("scroll" , throttle(function(){
                            if(!init.loading){
                                 init.fire_height = $(document).scrollTop() + document.documentElement.clientHeight;
                                 if(init.fire_height > Math.min.apply(false , init.height_list) - options.advance_load ){
                                    init.loading = true;
                                    loadPic(init.start)
                                 }
                            }
                         } , options.delay))
                    };
                    function loadPic( start ){
                        var in_options = {
                            url : options.ajax_options.url ,
                            data : options.ajax_options.data 
                        }
                            in_options.data[options.sendstart_name] = start ,
                            in_options["_"] = Date.now()
                        $.ajax( in_options ).then(function(res){
                            render(res)
                            init.start = eval("res." + options.next_start);
                            init.loading = false;
                        })
                    };
                    function render( res ){
                        var html = "";
                        var deg = /@/g
                        options.html = options.html.replace(deg , "")
                        for(var i = 0 ; i < res.data.object_list.length ; i ++){
                            html += eval("`" + options.html + "`")
                        }
                        $(options.container).append(html);
                        if(init.height_list.length === 0){
                            firstRender( options.col )
                            continueRender( options.col )
                        }else{
                            continueRender( init.eles_length )
                        }
                    }
                    function firstRender( num ){
                        for(var i = 0 ; i < num ; i ++){
                            init.height_list.push($(".box").eq(i).outerHeight() + $(".box").eq(i).position().top);
                        }
                    }
                    function continueRender( num ){
                        init.eles_length = $(".box").length;
                        for(var i = num ; i < $(".box").length ; i++){
                            var min = Math.min.apply(false , init.height_list)
                            var min_index = init.height_list.indexOf(min);
                            $(".box").eq(i).css({
                                left : min_index * options.pic_options.wd_num,
                                top : min + options.interval ,
                                position : "absolute"
                            })
                        init.height_list[min_index] = init.height_list[min_index] + $(".box").eq(i).outerHeight() + options.interval
                        }
                    }
                    function throttle( callback , delay ){
                        delay = delay || 100;
                        var t = null ;
                        var _arguments = [];
                        for(var i = 2 ; i < arguments.length ; i++){
                             _arguments.push( arguments[i] );
                        }
                        return function(){
                            if( typeof t === "number" ){
                                return false;
                            }
                            t = setTimeout(function(){
                                t = null ;
                                callback.apply( false , _arguments);
                            } , delay)
                        }
                    };
                    function judge_error(){
                        var err = options.ajax_options ? null :   "缺少参数ajax_options";
                        throw_error( err );
                        err = options.ajax_options.url ? null : "缺少参数ajax_options.url";
                        throw_error( err );
                        err = options.ajax_options.data ? null : "缺少参数ajax_options.data";
                        throw_error( err );
                        err = options.pic_options ? null : "缺少参数pic_options";
                        throw_error( err );
                        err = options.pic_options.ele ? null : "缺少参数pic_options.ele";
                        throw_error( err );
                        err = options.pic_options.wd_num ? null : "缺少参数pic_options.wd_num";
                        throw_error( err );
                        err = options.pic_options.width ? null : "缺少参数pic_options.width";
                        throw_error( err );
                        err = options.html ? null : "缺少参数html";
                        throw_error( err );
                        err = options.next_start ? null : "缺少参数next_start";
                        throw_error( err );
                        err = options.sendstart_name ? null : "缺少参数sendstart_name";
                        throw_error( err );
                        err = options.container ? null : "缺少参数container";
                        throw_error( err );
                    };
                    function throw_error( err ){
                        if(err){
                            throw err;
                        }
                    }
                    judge_error()
                    init()
                })
            }
        } , jQuery)
    }else{
        throw "未检测到jQuery , 请先插入jQuery"
    }
})();

# 瀑布流

## 提供函数

- $.waterFall()

## 参数

### 必填参数

- ajax_options

    >请求后端数据的需要的参数 ;请确保提供的ajax参数正确

    - url

    >请使用更改服务端之后的url

    - data

- pic_options

    >图片信息

    - wd_num

        >每个图片所在容器的宽度 , 包含margin

    - ele

        >所需要渲染的元素信息列表的位置

- sendstart_name

    >ajax的data请求中开始位置的键名

- next_start

    >下次请求开始的位置

- html

    >渲染的字符串 ;

    - 渲染时请使用ES6的反引号``来编写字符串

    - 变量用`$@{ 变量}`来写 ;

    - 注意渲染图片时,必须直接添加高度信息 , 因为宽度信息是确定的, 所以缩放比例也就确定了 , 缩放比例再乘以原高度就等于所渲染高度;

    - res为获取到的后端数据

    - 因为所需要渲染的元素信息列表的位置已给定 , 所以元素信息列表的位置+ `[i]` 表示每个需要渲染的元素信息

- container

    >渲染到哪个容器

### 可选配置参数

- delay

    >函数节流的间隔毫秒数,默认为100

- advance_load

    >滚动条到最后图片上方的距离 默认500

- col

    >渲染成几列

- interval

    >每行之间的空隔 ; 默认为20;

- start

    >从第哪张图片开始  ;默认为0;ajax的data请求中开始位置的键值

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

longz_h

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值