ztxq.html 10.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主题详情</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/ztxq.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.css">
    <link rel="stylesheet" type="text/css" href="css/dropload.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>

    <style>
        .icon-caidan{
            font-size: 0.5rem;
        }
        .icon-magnifier{
            color: #999999;
        }

        .f_size{
            font-weight: normal;
            font-size: 0.18rem;
        }
        .icon-xiugai{
            margin-left: 0.15rem;
            font-size: 0.3rem;
            color: #999999;
            display: flex;
            font-weight: bold;
            align-items: center;
        }
        .top_dot{
            width: 0.08rem;
            height: 0.08rem;
            background:rgba(166,16,16,1);
            border:1px solid rgba(255, 255, 255, 1);
            border-radius: 50%;
            position: absolute;
            top: 0;
            right: 0;
        }
        .color_black{
            color: black;
        }
        .margin_t{
            margin-top: 0.1rem;
        }

        /*底部菜单*/
        .font_s{
            font-size: 0.4rem;
            color: #A61010;
        }
        .icon-bilibilidonghua{
            font-size: 0.8rem;
        }

    </style>
</head>

<body>
<div class="container">
    <div class="top">
        <!--顶部菜单-->
        <div class="top_t">
            <!--左-->
            <div class="top_t_left">
                <!--中文字-->
                <div class="top_t_left_text">

                </div>
                <!--菜单图标-->
                <div class="iconfont icon-caidan">
                    <div class="menu_item" style="display: none;">

                        <!--<p class="index_jump">主页</p >-->
                        <!--<p class="rwxq_jump">人物详情</p>-->
                        <!--<p class="grzy_jump">个人主页</p>-->
                        <!--<p class="spxq_jump">视频详情</p>-->
                        <div class="menu_item_a">
                            <div>首页</div>
                            <div class="menu_item_a_pic">
                                <img src="images/you@2x.png">
                            </div>
                        </div>
                        <div class="menu_item_a">
                            <div>精选</div>
                            <div class="menu_item_a_pic">
                                <img src="images/you@2x.png">
                            </div>
                        </div>
                        <div class="menu_item_a">
                            <div>动态</div>
                            <div class="menu_item_a_pic">
                                <img src="images/you@2x.png">
                            </div>
                        </div>
                        <div class="menu_item_a">
                            <div>百科</div>
                            <div class="menu_item_a_pic">
                                <img src="images/you@2x.png">
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <!--中-->
            <div class="top_t_middle">
                <img src="images/peke.png">
            </div>
            <!--右-->
            <div class="top_t_right">
                <!--铃声-->
                <div class="iconfont icon-10">
                    <!--小红点-->
                    <div class="top_dot"></div>
                </div>
                <!--头像-->
                <div class="top_t_right_pic">
                    <img src="images/1.png">
                </div>
            </div>
        </div>
        <!--底部搜索-->
        <div class="top_d">
            <div class="iconfont icon-magnifier"></div>
            <input class="top_d_input" placeholder="搜索音乐/作品/风格">
        </div>
    </div>

    <div class="banner">
        <img src="images/banner1.png">
    </div>

    <div class="item_box">
        <div class="items">
            <div class="item">
                <div class="item_top">
                    <img src="images/banner_3.png">
                    <div class="item_top_box">
                        <div class="item_top_box_item">
                            观看人数 12356
                        </div>
                        <div class="item_top_box_item">
                            时长 10:00
                        </div>
                    </div>
                </div>

                <div class="item_bottom">
                    <div class="item_bottom_t">
                        The best of 2018
                    </div>
                    <div class="item_bottom_b">

                        文章开通一部分内容截取文章开通一
                        部分容截取文章开通一部分内容截取
                        文章开通一部分内容截取文章开通一
                        部分容截取文章开通一部分内容截取

                    </div>
                </div>
            </div>

        </div>
    </div>


</div>
</body>
<script src="js/dropload.min.js"></script>
<script>
    // 菜单
    $('.icon-caidan').click(function () {
        console.log(11)
        $('.menu_item').slideToggle();
        // 关闭图片功能  2019.4.8
        // if($(this).hasClass("icon-caidan")){
        //     $(this).addClass("icon-guanbi");
        //     $(this).removeClass("icon-caidan");
        //     $("body").css("overflow","hidden");
        // }else{
        //     $(this).removeClass("icon-guanbi");
        //     $(this).addClass("icon-caidan");
        //     $("body").css("overflow","auto");
        // }
    })
    // 页数
    var page = 0;
    // 每页展示10个
    var size = 3;
    $('.item_box').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="item">\n' +
                                '            <div class="item_top">\n' +
                                '                <img src="images/banner_3.png">\n' +
                                '                <div class="item_top_box">\n' +
                                '                    <div class="item_top_box_item">\n' +
                                '                        观看人数 12356\n' +
                                '                    </div>\n' +
                                '                    <div class="item_top_box_item">\n' +
                                '                        时长 10:00\n' +
                                '                    </div>\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '\n' +
                                '            <div class="item_bottom">\n' +
                                '                <div class="item_bottom_t">\n' +
                                '                    The best of 2018\n' +
                                '                </div>\n' +
                                '                <div class="item_bottom_b">\n' +
                                '\n' +
                                '                    文章开通一部分内容截取文章开通一\n' +
                                '                    部分容截取文章开通一部分内容截取\n' +
                                '                    文章开通一部分内容截取文章开通一\n' +
                                '                    部分容截取文章开通一部分内容截取\n' +
                                '\n' +
                                '                </div>\n' +
                                '            </div>\n' +
                                '        </div>'

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

</script>
</html>