index.html 14.1 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盛宝财富</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" href="css/dropload.css" />
    <script src="js/base.js"></script>
</head>
<body>
    <div class="main content">
        <div class="container">
            <!--顶部公告-->
            <div class="top">
                <!--最新公告-->
                <div class="top_anno">
                    最新公告
                </div>
                <div class="top_text">
                    <p>通知通知通知通知通知通知通通知通知通知通知通知通知通
                        通知通知通知通知通知通知通通知通知通知通知通知通知通
                    </p>

                </div>
            </div>
            <!--今日推荐-->
            <div class="mid_today">
                今日推荐:
                <!--链接-->
                <div class="link_left">
                    <img src="images/lianjie.png">
                </div>
                <div class="link_right">
                    <img src="images/lianjie.png">
                </div>
            </div>
            <!--今日推荐菜单栏-->
            <div class="mid_today_menu">
                <div class="today_box">
                    <!--推荐1-->
                    <div class="mid_today_menu_item" onclick="btn_next()">
                        <!--图片-->
                        <div class="mid_today_menu_item_pic">
                            <img src="images/dsvgfds1@2x.png">
                        </div>
                        <!--文字-->
                        <div class="mid_today_menu_item_text">
                            秒贷
                        </div>
                    </div>
                    <!--推荐2-->
                    <div class="mid_today_menu_item" onclick="btn_next()">
                        <!--图片-->
                        <div class="mid_today_menu_item_pic">
                            <img src="images/dfsfds@2x.png">
                        </div>
                        <!--文字-->
                        <div class="mid_today_menu_item_text">
                            秒贷
                        </div>
                    </div>
                    <!--推荐3-->
                    <div class="mid_today_menu_item" onclick="btn_next()">
                        <!--图片-->
                        <div class="mid_today_menu_item_pic">
                            <img src="images/dsfs3@2x.png">
                        </div>
                        <!--文字-->
                        <div class="mid_today_menu_item_text">
                            秒贷
                        </div>
                    </div>


                </div>
            </div>

            <!--推荐贷款-->
            <div class="mid_loans">
                推荐贷款
                <!--链接-->
                <div class="link_left">
                    <img src="images/lianjie.png">
                </div>
                <div class="link_right">
                    <img src="images/lianjie.png">
                </div>

            </div>

            <!--秒贷框-->
            <div class="mid_loans_boxs" onclick="btn_next()">
            <div class="mid_loans_box fitst_loans">
                <!--头部名字-->
                <div class="mid_loans_box_top">
                    <div class="mid_loans_box_top_text">
                        秒贷
                    </div>
                    <!--热门-->
                    <div class="mid_loans_box_top_hot">
                        热门
                    </div>
                </div>
                <!--下划虚线-->
                <div class="mid_loans_box_line"></div>
                <!--底部内容-->
                <div class="mid_loans_box_bottom">
                    <!--左边图片-->
                    <div class="mid_loans_box_bottom_pic">
                        <img src="images/dsfds4@2x.png">
                    </div>
                    <!--右边文字-->
                    <div class="mid_loans_box_bottom_text">
                        <div class="mid_loans_box_bottom_text_title">
                            芝麻粉500+无负面,立马放
                        </div>
                        <div class="mid_loans_box_bottom_text_top">
                            申请人数: <span class="span_color">3658</span>
                        </div>
                        <div class="mid_loans_box_bottom_text_mid">
                            月利率: <span class="span_color">0.3%-0.5%</span>
                        </div>
                        <div class="mid_loans_box_bottom_text_bottom">
                            3分钟申请,30分钟审核,秒下款
                        </div>
                    </div>
                </div>
            </div>

            <div class="mid_loans_box">
                <!--头部名字-->
                <div class="mid_loans_box_top">
                    <div class="mid_loans_box_top_text">
                        秒贷
                    </div>
                    <!--热门-->
                    <div class="mid_loans_box_top_hot">
                        热门
                    </div>
                </div>
                <!--下划虚线-->
                <div class="mid_loans_box_line"></div>
                <!--底部内容-->
                <div class="mid_loans_box_bottom">
                    <!--左边图片-->
                    <div class="mid_loans_box_bottom_pic">
                        <img src="images/sdfsfesw@2x.png">
                    </div>
                    <!--右边文字-->
                    <div class="mid_loans_box_bottom_text">
                        <div class="mid_loans_box_bottom_text_title">
                            芝麻粉500+无负面,立马放
                        </div>
                        <div class="mid_loans_box_bottom_text_top">
                            申请人数: <span class="span_color">3658</span>
                        </div>
                        <div class="mid_loans_box_bottom_text_mid">
                            月利率: <span class="span_color">0.3%-0.5%</span>
                        </div>
                        <div class="mid_loans_box_bottom_text_bottom">
                            3分钟申请,30分钟审核,秒下款
                        </div>
                    </div>
                </div>
            </div>
            <div class="mid_loans_box">
                <!--头部名字-->
                <div class="mid_loans_box_top">
                    <div class="mid_loans_box_top_text">
                        秒贷
                    </div>
                    <!--热门-->
                    <div class="mid_loans_box_top_hot">
                        热门
                    </div>
                </div>
                <!--下划虚线-->
                <div class="mid_loans_box_line"></div>
                <!--底部内容-->
                <div class="mid_loans_box_bottom">
                    <!--左边图片-->
                    <div class="mid_loans_box_bottom_pic">
                        <img src="images/dsfs6@2x.png">
                    </div>
                    <!--右边文字-->
                    <div class="mid_loans_box_bottom_text">
                        <div class="mid_loans_box_bottom_text_title">
                            芝麻粉500+无负面,立马放
                        </div>
                        <div class="mid_loans_box_bottom_text_top">
                            申请人数: <span class="span_color">3658</span>
                        </div>
                        <div class="mid_loans_box_bottom_text_mid">
                            月利率: <span class="span_color">0.3%-0.5%</span>
                        </div>
                        <div class="mid_loans_box_bottom_text_bottom">
                            3分钟申请,30分钟审核,秒下款
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>

</body>
<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>
<script>
    function btn_next() {
        window.location.href = "last.html"
    }

    // JavaScript Document
    //上拉加载
    $(document).ready(function(){
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 3;
        $('.content').dropload({
            scrollArea : window,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
                domUpdate  : '<div class="dropload-update">↑释放更新</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData  : '<div class="dropload-noData">暂无数据</div>'
            },
            loadDownFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                var s = "";
                var show="";
                var list_compressor="";
                var list_answer="";
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
                        var arrLen = data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result +='<div class="mid_loans_box">\n' +
                                    '                <!--头部名字-->\n' +
                                    '                <div class="mid_loans_box_top">\n' +
                                    '                    <div class="mid_loans_box_top_text">\n' +
                                    '                        秒贷\n' +
                                    '                    </div>\n' +
                                    '                    <!--热门-->\n' +
                                    '                    <div class="mid_loans_box_top_hot">\n' +
                                    '                        热门\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '                <!--下划虚线-->\n' +
                                    '                <div class="mid_loans_box_line"></div>\n' +
                                    '                <!--底部内容-->\n' +
                                    '                <div class="mid_loans_box_bottom">\n' +
                                    '                    <!--左边图片-->\n' +
                                    '                    <div class="mid_loans_box_bottom_pic">\n' +
                                    '                        <img src="images/dsfs6@2x.png">\n' +
                                    '                    </div>\n' +
                                    '                    <!--右边文字-->\n' +
                                    '                    <div class="mid_loans_box_bottom_text">\n' +
                                    '                        <div class="mid_loans_box_bottom_text_title">\n' +
                                    '                            芝麻粉500+无负面,立马放\n' +
                                    '                        </div>\n' +
                                    '                        <div class="mid_loans_box_bottom_text_top">\n' +
                                    '                            申请人数: <span class="span_color">3658</span>人\n' +
                                    '                        </div>\n' +
                                    '                        <div class="mid_loans_box_bottom_text_mid">\n' +
                                    '                            月利率: <span class="span_color">0.3%-0.5%</span>\n' +
                                    '                        </div>\n' +
                                    '                        <div class="mid_loans_box_bottom_text_bottom">\n' +
                                    '                            3分钟申请,30分钟审核,秒下款\n' +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>'




                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试,延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面,放到最后面
                            $('.mid_loans_boxs').append(result);
                            // 每次数据插入,必须重置
                            me.resetload();
                        },500);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错,也得重置
                        me.resetload();
                    }
                });
            },
            threshold : 50
        });

    })
</script>
</html>