以下代码根据格式复制粘贴就可以查看效果了，这个方式展示可能比较麻烦，如果有看不太明白或者感到这种方式不喜欢的可以看我其他的博客， 有的我已经记录的很详细了，原文和源码我都放上去了，大家一起进步一起学习
###index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src=" js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--根据方法创建一个div盒子模型-->
<div id="project_list">
</div>
<script type="text/javascript">
notice();
function notice(){
// 要注意传入的路径
$.ajax("data.json",{
data:{},
dataType:'json',
type:'get',
async:'false',
success:function(data){
var listdata=data.list; //列表数据
if(listdata.length>0){ //项目列表
var listInfo="";
$.each(listdata,function(){
listInfo+="<li class='mui-table-view-cell mui-media'>"+
"<img class='mui-media-object mui-pull-left project-img' src="+this.project_img+">"+
"<div class='mui-media-body'>"+
"<h3 class='project-name'>"+this.project_name+"</h3>"+
"<p class='money-range' class='mui-ellipsis loan-range'>"+this.money_range+"</p>"+
"<p class='loan-rate'>每日百分比"+this.day_rate+"%，应该为"+this.day_limit+"天，"+this.day_person+"人已交"+"</p>"+
"</div>"+
"<div class='loan-more'>"+
"<a href="+this.button_info+" target='' ><button>详情</button></a>"+
"</div>"+
"</li>";
});
$("#project_list")[0].innerHTML=listInfo;
}
}
// error:function(xhr,type,errorThrown){
// alert("系统繁忙，请联系管理员");
// }
})
}
</script>
</body>
</html>
###data.json
{
"list":[
{
"project_img":"images/Home-logo1-hua.png",
"project_name":"111",
"money_range":"2000~40000",
"day_rate":"0.04",
"day_limit":"7-90",
"day_person":"1400"
},
{
"project_img":"images/Home-logo2-bao.png",
"project_name":"222",
"money_range":"2000~40000",
"day_rate":"0.04",
"day_limit":"7-90",
"day_person":"1"
}
]
}
ps:网上找的源码，没有图片的路径才会报错，但是数据以及传递到页面上了
