<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**{margin: 0;padding: ;}*/
div{position: absolute;text-align: center;overflow: hidden;}
p{text-align: left;}
h3{text-align: left;}
font{color: gray;font-size: 15px;}
</style>
<script src="js/jquery.min.js" type="text/javascript">
</script>
<!--<script type="text/javascript" src="http://jquery.cuishifeng.cn/"></script>-->
</head>
<body>
</body>
</html>
<script type="text/javascript">
body = $('body')
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/houseList",
async:true,
success : function(result){
lengthx = result.datalist.length
for (x=0;x<lengthx;x++){
divx = $('<div></div>')
divx.css({'position':'relative','margin-top':'10px'})
body.append(divx)
imgx = $('<img />')
imgx.css({'vertical-align':'middle'})
imgx_src = result.datalist[x].image
imgx.attr('src',imgx_src)
divx .append(imgx)
divxx = $('<div></div>')
divxx.css({'display':'inline-block','height':'100%'})
imgx.after(divxx)
titlex = $('<h3></h3>')
titlex.css({'border':'0','margin':'0'})
titlex_word = result.datalist[x].title
titlex.text(titlex_word)
divxx.append(titlex)
px = $('<p></p>')
px.css('margin-top','20px')
fx1 = $('<font id="name"></font>')
fx2 = $('<font id="type"></font>')
fx3 = $("<font id='area'></font>")
fx1_name =result.datalist[x].name
fx1.text(fx1_name+'|')
fx2_type = result.datalist[x].type
fx2.text(fx2_type+'|')
fx3_area = result.datalist[x].area
fx3.text(String(fx3_area)+'m^2')
// $('font').css({'color':'gray','font-size':'15px'})
px.append(fx1)
fx1.after(fx2)
fx2.after(fx3)
divxx.append(px)
pprice = $('<p></p>')
p_price = result.datalist[x].price
pprice.text(p_price)
pprice.css({'margin-bottom':'0','color':'orange','font-size':'20px','margin-top':'30px','position':'absolute','bottom':'0px'})
divxx.append(pprice)
}
}
});
</script>
QQ图片20190522210453.png
