html部分
<div class="list-wrap">
<ul class="list-box">
</ul>
</div>
js部分
//function ajax(url,data,callback){//如果有不同的url 可以通过注释的部分传不同的url
$.ajax({
url: 'json数据路径',
type: 'get',
dataType: 'json',
//data:data,
jsonp: 'callback',
async: false,
success: function (data) {
//callback(r);
dataList(data)
},
error: function () {
var errorE = ' <ul class="errorE"><li>抱歉,没有找到符合您要求的数据</li></ul> ';
$('.list-wrap').html(errorE)
}
});
//}
function dataList(data) {
//ajax('assets/js/text.json',{},function(data){
//var tagCon = "";
var tagData = "";
var list = data.imgListData;
var conlist = '<ul class="list-box">'
for (var i = 0; i < list.length; i++) {
var index_list = list[i]
// console.log(index_list);
var tagCon = ""
for (var j = 0; j < index_list.tag.length; j++) {
tagData = index_list.tag[j].tags;
//console.log(tagData)
tagCon += '<span class="tag_' + j + '">' + tagData + '</span>';
}
conlist += '<li>' +
'<a class="list-pic"><img src="' + list[i].imgUrl + '" /></a>' +
'<div class="list-con">' +
'<h2><a>' + list[i].title + '</a></h2>' +
'<div class="list-info">' +
'<p class="info-con">' +
'<i class="icon icon-huxing"></i>' +
'<span>' + list[i].content + '</span>' +
'</p>' +
'<p class="info-con">' +
'<i class="icon icon-time"></i>' +
'<span>' + list[i].room + '</span>' +
'<span>' + list[i].adrs + '</span>' +
'</p>' +
'<p class="info-con"><i class="icon icon-address"></i>' + list[i].dataTimes + '发布</p>' +
'<p class="tag">' + tagCon + '</p>' +
'<div class="price-box">' +
'<p class="wan"><span>' + list[i].money + '</span>万</p>' +
'<p class="dan">' + list[i].unitprice + '元/m²</p>' +
'</div>' +
'</div>' +
'</div>' +
'</li>'
}
conlist += '</ul>';
$('.list-wrap').html(conlist)
//});
};
json数据格式
{
"imgListData": [
{
"id": "1",
"title": "标题描述",
"content": "内容描述 ",
"city": "详细地址",
"adrs": "上海",
"room": "楼房描述",
"imgUrl": "图片地址",
"dataTimes": "时间",
"peo": "姓名",
"tel": "手机号",
"pho": "照片地址",
"money": "价格",
"unitprice": "单价",
"tag": [
{
"tags": "标签一"
},{
"tags": "标签七"
},{
"tags": "标签八"
}
]
},
{
"id": "2",
"title": "标题描述",
"content": "内容描述 ",
"city": "详细地址",
"adrs": "上海",
"room": "楼房描述",
"imgUrl": "图片地址",
"dataTimes": "时间",
"peo": "姓名",
"tel": "手机号",
"pho": "照片地址",
"money": "价格",
"unitprice": "单价",
"tag": [
{
"tags": "标签二"
},{
"tags": "标签六"
},{
"tags": "标签七"
}
]
}
]
}
css
body{background:#fff;color:#333;}
body,ul,ol,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,td,th{margin:0;padding:0;}
body,textarea,input,select{font-size:14px;font-family:"Microsoft YaHei",Tahoma,Arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
li{list-style:none;}
img{border:none;display:block;}
em,i{font-style:normal;}
textarea{resize:none;overflow:auto;}
textarea,input,select{outline:none;}
tabel{border-collapse:collapse;}
a{text-decoration:none;color:#333;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}
a:focus{outline:none;}
a,area{blr:expression(this.onFocus=this.blur());}
input[type=submit],input[type=reset],input[type=button]{filter:chroma(color=#000000);}
/*clear*/
.clear:after{content:".";height:0;display:block;clear:both;visibility:hidden;}
.clear{_zoom:1;*display:inline-block;}
/*ellipsis*/
.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
/*border-radius*/
.border-radius{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
/*list*/
.list-wrap{width:1000px;margin:20px auto;}
.list-box li{overflow:hidden;position:relative;margin-bottom:20px;}
.list-pic{float:left;width:240px;height:196px;border-radius:4px;}
.list-pic img{width:240px;height:196px;border-radius:4px;}
.list-con{float:left;width:600px;margin-left:20px;}
.list-con h2{margin-bottom:16px;overflow:hidden;}
.list-con h2 a{float:left;max-width:500px;font-size:20px;line-height:30px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.list-con h2 a:hover{color:#1c8fff;}
.list-info p{color:#666;padding:7px 0;vertical-align:middle;}
.list-info .icon{display:inline-block;vertical-align:2px;margin-right:5px;width:8px;height:8px; border-radius:3px;}
.info-con span{padding-right:10px;}
.list-info .tag{font-size:12px;padding-left:26px;}
.tag span{display:inline-block;padding:4px 10px;/*background:#DFEFFF;color:#1c8fff;*/border-radius:4px;margin-right:10px;}
.price-box{position:absolute;right:0;top:54px;color:#666;text-align:right;}
.price-box .wan{color:#FF6666;}
.price-box .wan span{font-size:30px;font-weight:bold;}
.price-box .dan{padding-top:10px;}
.icon-huxing{background:#c1c5f9;}
.icon-time{background:#f1cfb0;}
.icon-address{background:#f2c1f3;}
.tag span{color:#fff;}
.tag .tag_0{background:#c3dbf3;}
.tag .tag_1{background:#fbd08f}
.tag .tag_2{background:#fdd2d5;}
.tag .tag_3{background:#add2a5;}
运行结果