前端 简单实现应用商店list

前端动态创建类似应用商店功能

效果展示(4个应用一页)

第一页

 

 

第二页

 

Css样式

#div_list{
    width: 500px;
    height:auto;
    margin: auto;
}
#div_list .div_item {
    width: 500px;
    height: 100px;
    overflow: hidden;
    border: solid 1px #f2f2f2;
    background-color: #e3e3e3;
    border-radius: 6px;
}
#div_list .div_item .div_icon {
    margin: 5px;
    float: left;
    width: 90px;
    height: 90px;
    background-image: url("../images/icon_weixin.jpg");
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px;
}
#div_list .div_item .div_content {
    float: left;
    width: 300px;
    height: 100px;
    padding-left: 5px;
}
#div_list .div_content .p_app_name{
    width: auto;
    height: 10px;
    margin-top: 10px;
}
#div_list .div_item .div_content .div_mid{
    margin-top: 5px;
    width: auto;
    height: auto;
}
#div_list .div_content span{
    font-size: 12px;
    font-family: cursive;
    color: #323232;
}
#div_list .span_intruduce{
    width: auto;
    height: auto;
    margin-top: 5px;
    display: inline-block;
}
#div_list .div_button {
    width: 90px;
    height: 90px;
    float: left;
}
 
#div_list .div_button .btn_download {
    margin-top: 30px;
    width: 90px;
    height: 32px;
    border-radius: 5px;
    border: solid 1px aliceblue;
    font-size: 12px;
    color: #00bcd4;
}
 
#div_list .div_button .btn_download:hover {
    cursor: pointer;
}
.div_sneck{
    margin-top:50px;
    width: 260px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
}
.li_prew{
    width: 50px;
    height: 30px;
    border: solid 1px #e3e3e3;
    text-align: center;
    list-style: none;
    cursor: pointer;
    float: left;
    font-size: 25px;
 
}
.li_btn{
    width: 50px;
    height: 30px;
    border: solid 1px #e3e3e3;
    text-align: center;
    list-style: none;
    cursor: pointer;
    float: left;
    font-size: 25px;
}
.li_next{
    width: 50px;
    height: 30px;
    border: solid 1px #e3e3e3;
    text-align: center;
    list-style: none;
    cursor: pointer;
    float: left;
    font-size: 25px;
}
.div_li_btn_mid{
    width: auto;
    height: 30px;
    float: left;
}

模拟从后台获取数据

{"msg":0,"data":[

  {"id":0,"icon":"../images/icon_weixin.jpg","name":"微信","download":"3亿","size":"32M","description":"微信，让社交变得简单"},

  {"id":1,"icon":"../images/icon_quna.jpg","name":"去哪儿旅游","download":"3000万","size":"25M","description":"去哪儿旅游，总有你要的低价"},

  {"id":2,"icon":"../images/icon_weixin.jpg","name":"微信","download":"3亿","size":"32M","description":"微信，让社交变得简单"},

  {"id":3,"icon":"../images/icon_quna.jpg","name":"去哪儿旅游","download":"3000万","size":"25M","description":"去哪儿旅游，总有你要的低价"},

  {"id":4,"icon":"../images/icon_weixin.jpg","name":"微信","download":"3亿","size":"32M","description":"微信，让社交变得简单"},

  {"id":5,"icon":"../images/icon_quna.jpg","name":"去哪儿旅游","download":"3000万","size":"25M","description":"去哪儿旅游，总有你要的低价"}

]

}

Js代码

var listSize = 0;
var pageSize = 0;
var html = [];
$(document).ready(function () {
    initData();
    initViewListener();
});
 
function initData() {
    var url = "../web/package.json";
    var params = {
        "user": "123"
    };
    $.ajax({
        url: url,
        data: params,
        type: "GET",
        dataType: "JSON",
        timeout: 5000,
        cache: false,
        contentType: "charset=utf-8",
        success: function (data, textStatus) {
            if (data.msg == 0) {
                var jsonArray = data.data;
                listSize = jsonArray.length;
                pageSize = Math.floor(((listSize - 1) / 4) + 1);
                console.log("listSize " + listSize);
                console.log("pageSize " + pageSize);
                for (item in jsonArray) {
                    html[item]=addItem(jsonArray[item]["id"],jsonArray[item]["icon"], jsonArray[item]["name"],jsonArray[item]["download"],jsonArray[item][                      "size"], jsonArray[item]["description"]);
                }
                if(listSize>4)
                {
                    for(i=0;i<4;i++){
                        $("#div_list").append(html[i]);
                    }
                }else
                {
                    for(i=0;i<listSize;i++)
                    {
                        $("#div_list").append(html[i]);
                    }
                }
                for (i = 0; i < pageSize; i++) {
                    $(".div_li_btn_mid").append(addBtn(i + 1));
                }
                console.log("s --- " + html[item]);
                $(".btn_download").each(function () {
                    $(this).click(function () {
                        alert(jsonArray[$(this).val()]["id"]);
                    });
                });
                $(".li_btn").each(function () {
                    $(this).click(function () {
                        var page = $(this).val();
                        var htmlInsert = "";
                        if (page < pageSize) {
                            for (i = (page - 1) * 4; i < (page - 1) * 4 + 4; i++) {
                                htmlInsert += html[i];
                            }
                            $("#div_list").html(htmlInsert);
                        } else {
                            for (i = (page - 1) * 4; i < listSize; i++) {
                                htmlInsert += html[i];
                            }
                            $("#div_list").html(htmlInsert);
                        }
                        $(".btn_download").each(function () {
                            $(this).click(function () {
                                alert(jsonArray[$(this).val()]["id"]);
                            });
                        });
                    });
                });
 
                console.log(html.toString());
            } else {
                console.log(-1);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(textStatus);
        },
    });
}
 
function initViewListener() {
    $(".li_prew").click(function () {
        $(".li_btn").each(function () {
            var index = $(this).html();
            $(this).html(--index);
        });
    });
 
    $(".li_next").click(function () {
        $(".li_btn").each(function () {
            var index = $(this).html();
            $(this).html(++index);
        });
    });
}
//JS中创建一个类
function StringBuffer() {
    this.string = [];
    StringBuffer.prototype.append = function (str) {
        this.string.push(str);
    }
    StringBuffer.prototype.toString = function () {
        return this.string.join('');
    }
}
 
function initDownloadListener() {
 
}
function addItem(id, icon, name, download, size, des) {
    var sb = new StringBuffer();
    sb.append('<div class="div_item">');
    sb.append('<div class="div_icon" style="background-image:url(' + icon + ')"></div>');
    sb.append('<div class="div_content">');
    sb.append('<p class="p_app_name">' + name + '</p>');
    sb.append('<div class="div_mid"><span>' + download + '</span><span> ' + size + '</span></div>');
    sb.append('<span class="span_intruduce">' + des + '</span>');
    sb.append('</div>');
    sb.append(' <div class="div_button"> <button class="btn_download" value="' + id + '">下载</button> </div>');
    sb.append('</div>');
 
    //var sb = "";
    //sb+='<div class="div_item">';
    //sb+='<div class="div_icon" style="background-image:url(' + icon + ')"></div>';
    //sb+='<div class="div_content">';
    //sb+='<p class="p_app_name">' + name + '</p>';
    //sb+='<div class="div_mid"><span>' + download + '</span><span> ' + size + '</span></div>';
    //sb+='<span class="span_intruduce">' + des + '</span>';
    //sb+='</div>';
    //sb+=' <div class="div_button"> <button class="btn_download" value="'+id+'">下载</button> </div>';
    //sb+='</div>';
    return sb.toString();
}
 
function addBtn(num) {
    var sb = "";
    sb += '<li class="li_btn" value="' + num + '">' + num + '</li>';
    return sb;
}

Index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="../css/index.css"/>
    <script type="text/javascript" src="../js/jquery-2.2.2.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
<div id="div_list">
</div>
<div class="div_sneck">
    <li class="li_prew"><<</li>
    <div class="div_li_btn_mid"></div>
    <li class="li_next">>></li>
</div>
</body>
</html>

转载于:https://my.oschina.net/sunqiyao/blog/664413