前端动态创建类似应用商店功能
效果展示(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>