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

效果展示(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>