上拉翻页插件dropload.js

 

插件地址

链接：https://pan.baidu.com/s/1mu22ahS0Vze87M2Ez-LGDA

密码：jain

 

 

HTML：

<div class="mainwrap">
    <div class="datesty"></div>

    <div class="recodewrap">

    </div>
    <div class="tail"></div>
    <div style="text-align: center" class="hide nodataTotal">
        <div class="nodata "></div>
        <span class="nodata_description">暂无数据</span>
    </div>
</div>

CSS：

<link rel="stylesheet" href="/css/dropload.css">

.mainwrap {
            width: 980px;
            margin: auto;
            overflow: hidden;
            min-height: 960px;
        }

        .model {
            border-bottom: #f0f0f0 solid 1px;
            overflow: hidden;
            zoom: 1;
        }

        .model p {
            width: 385px;
            color: #999;
            font-size: 18px;
            line-height: 26px;
            margin-top: 10px;
        }

        .nobd {
            border: none;
        }

        .subpg {
            height: auto;
            background: #f5f5f5;
        }

        .datesty {
            background: url(/img/date.png) no-repeat 155px 0;
            height: 62px;
            margin-top: 100px;
        }

        /*无数据样式*/
        .nodata{
            background: url(/img/nodatas.png) no-repeat;
            height: 180px;
            margin-top: 100px;
            width: 200px;
            /* text-align: center; */
            display: inline-block;
        }
        .nodata_description{
            font-size: 20px;
            color: #999;
            display: inline-block;
            width: 100%;
            padding-top: 10px;
        }
        .recodewrap {
            background: url(/img/rline.png) repeat-y 185px;
            overflow: hidden;
            height: 0;
            padding: 60px 0 20px;
        }

        .history {
            overflow: hidden;
            zoom: 1;
            margin-top: 30px;
        }

        .htime {
            float: left;
            padding-right: 25px;
            width: 168px;
            text-align: right;
            background: url(/img/dot.png) no-repeat right 23px;
            height: 100px;
            font-size: 14px;
            font-family: Arial, sans-serif;
            color: #999;
            line-height: 20px;
        }

        .htime span {
            font-size: 26px;
            color: #9a9a9a;
        }

        .hintro {
            float: left;
            padding-left: 22px;
            font-size: 13px;
            color: #767676;
            line-height: 22px;
            background-color: #fff;
            margin-left: 30px;
            width: 370px;
            padding: 30px;
            box-sizing: border-box;
        }

        .hintro h2 {
            font-size: 24px;
            color: #888;
            font-weight: normal;
            margin: 0 0 15px;
        }
        .hintro .detail{
            font-size: 16px;
            padding-bottom: 4px;
        }
        .hintro .latest {
            color: #000;
        }

        .hintro .add {
            border-top: 1px solid #ccc;
            padding-top: 5px;
        }

        .tail {
            background: url(/img/tail.png) no-repeat 185px;
            height: 73px;
        }

Javascript：

<script src="/plugin/common/dropload/dropload.js"></script>

$(document).ready(function () {
            //获取成长档案数据
            $.ajax({
                type: 'POST',
                url: '/growthInfo/getPage',
                data: {
                    page: 1,
                    limit: 5,
                    user: $('#uid').val()
                },
                async:false,
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 0) {
                        if(res.data.length==0){
                            $('.datesty').addClass('hide');
                            $('.tail').addClass('hide');
                            $('.nodataTotal').removeClass('hide');

                        }else{
                            $('.datesty').removeClass('hide');
                            $('.tail').removeClass('hide');
                            $('.nodataTotal').addClass('hide');

                            renderTimeline(res.data)
                            var page = 1;
                            var size = 5;

                            $('.mainwrap').dropload({
                                scrollArea : window,
                                loadDownFn : function(me){
                                    page++;
                                    var result = '';
                                    $.ajax({
                                        type: 'POST',
                                        url: '/growthInfo/getPage',
                                        dataType: 'json',
                                        data: {
                                            page: page,
                                            limit: size,
                                            user: $('#uid').val()
                                        },
                                        success: function(res){
                                            if( res.code == 0){
                                                var arrLen = res.data.length;
                                                if(arrLen > 0){
                                                    renderTimeline(res.data)
                                                    //图片预览
                                                    initPhotoSwipeFromDOM('.my-gallery');
                                                }else{
                                                    me.lock();
                                                    me.noData();
                                                    layer.msg('没有数据了！！！')
                                                }
                                                setTimeout(function(){
                                                    me.resetload();
                                                },1000);
                                            }else {
                                                layer.msg(res.msg)
                                            }
                                        },
                                        error: function(xhr, type){
                                            me.resetload();
                                        }
                                    });
                                }
                            });
                        }

                    }
                }
            });

            /**
             * 生成时间轴
             * @param data
             * @returns {boolean}
             */
            function renderTimeline(data) {
                if (data.length == 0) {
                    return false;
                }
                for (var i in data) {
                    var timestamp = data[i].createTime;
                    var d = new Date(timestamp); //根据时间戳生成的时间对象
                    var year = d.getFullYear();
                    var monthDay = (d.getMonth() + 1)+'.'+ d.getDate()
                    var timer = d.format("hh:mm:ss")
                    var imgHtml =  '';
                    if(!data[i].photos==''){
                        var imgArr = data[i].photos.split(',');
                    }
                    for (var j in imgArr){
                        if (imgArr[j] =="") break;
                        imgHtml+=  '<figure class="imgWrap"><div class="img-dv  layer-photos-demo"><a href="'+imgArr[j]+'" data-size="1920x1080"><img src="'+imgArr[j]+'" style="background-image:url(' +imgArr[j] +')"  alt="'+data[i].description+'"></a></div><figcaption style="display:none;">"'+data[i].description+'"</figcaption></figure>';
                    }
                    var hasVideo ='';
                    if((data[i]).videos.length<10){
                        hasVideo= "hide";
                    }
                    var srcImg = data[i].user.avatar;
                    if(srcImg=='null'||srcImg==null){
                        srcImg='/img/ld_logo.png'
                    }else{
                        srcImg = data[i].user.avatar
                    }
                    var html =
                        '<div class="history">\n\
                            <div class="bounce bounceInDown" style="display: block;">\n\
                            <div class="htime"> ' + year + '<br><span>' + monthDay + '</span><br>' + timer + '</div>\n\
                        <div class="hintro">\n\
                            <div class="po-avt-wrap">\n\
                                <img class="po-img" src='+srcImg+'>\n\
                            </div>\n\
                        <div class="hiBox">\n\
                           <div class="hiBoxMain">\n\
                            <h2 class="latest"><a target="_blank" href="/page/growth/photoWall?growthID='+data[i].uid+'">' + data[i].title + '</a></h2>\n\
                            <div class="detail">' + data[i].description + '</div>\n\
                            <div class="img figure-list"><div class="my-gallery"“” data-pswp-uid="1">'+imgHtml+'</div></div>\n\
                            <div class="video">\n\
                                <video src="'+data[i].videos+'" width="100%" controls="controls" height="155" class="'+hasVideo+'"/>\n\
                            </div>\n\
                            <span class="delete"><a href="javascript:deleteGrowth('+data[i].uid+');">删除...</a></span>\n\
                            <div class="add">'+data[i].location+'</div>\n\
                           </div>\n\
                        </div>\n\
                    </div>\n\
                    </div>\n\
                </div>'
                    $('.recodewrap').append(html);
                }

                if ($('.recodewrap').length) {
                    var ht = 0,
                        bounce = $('.bounce');
                    bounce.css({display: 'block'});
                    $('.history').each(function (i, n) {
                        ht += ($(n).height() + 30);
                    });
                    bounce.removeAttr('style');
                    $('.recodewrap').animate({height: ht}, 'slow');
                    var cs = 0;
                    $('.bounce').each(function (i, n) {
                        setTimeout(function () {
                            $(n).show().addClass('bounceInDown')
                        }, cs)
                        cs += 200;
                    });
                }
            }
            //图片预览
            initPhotoSwipeFromDOM('.my-gallery');
        })
    });