HTML+CSS+JS＞数据遍历渲染

不羁的程序员~

已于 2022-06-02 19:12:45 修改

阅读量1.9k

点赞数 1

分类专栏： JS 文章标签： javascript css html

于 2022-06-02 19:11:54 首次发布

本文链接：https://blog.csdn.net/qq_55172460/article/details/125105702

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据渲染</title>
    <style>
        table,
        th,
        td {
            border: 1px solid;
        }

        table {
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }

        td {
            text-align: center;
        }
    </style>
</head>

<body>

</body>
<script src="./data.js"></script>
<script>
    document.write('<table>');
    document.write('<caption><h2>数据渲染</h2></caption>');
    for (var i = 0; i < goodList.length; i++) {
        document.write('<tr>');
        if (i == 0) {
            document.write(
                `<th> ${goodList[i].title}</th>
                     <th> ${goodList[i].price}</th>
                     <th> ${goodList[i].imgUrl}</th>`);
        }
        else {
            document.write(
                `<td>${goodList[i].title}</td>
                     <td>${goodList[i].price}</td>
                     <td> <img src="${goodList[i].imgUrl}" alt=""></td>`);
        }

        document.write('</tr>');
    }
    document.write('</table>');


</script>

</html>

js文件：

var goodList = [
	{
		"imgUrl": "商品图片",
		"price": "商品价格",
		"title": "商品名称"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/5B/7C/rBACW14_iQGAPDHzAAFphbs4KdM017.jpg",
		"price": "79",
		"title": "玻尿酸高保湿面膜10片/盒"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6C/18/rBACYV1mJZOAYMEjAAI33pKo7RQ134.jpg",
		"price": "59",
		"title": "米酵素洁面乳 泡沫绵密"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/58/35/rBACYV45v3CAOkVKAABinPV4D_E761.jpg",
		"price": "89",
		"title": "玻尿酸淡纹变色（润唇膏）"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/5B/B6/rBACVF8jcQWAOwUtAAJLkosdGJ8018.jpg",
		"price": "39",
		"title": "S.S.铂金缎毛巾2条装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/F7/00/rBACVF7Qg7aAf2NJAACymzJqRIg448.jpg",
		"price": "59",
		"title": "手冲定制咖啡6杯9.9元/杯"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/2C/ED/rBACW1-_P7eAd7VIAABsvRc_xo4262.jpg",
		"price": "58",
		"title": "炫色魅力唇膏"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/E7/56/rBACVGCKgDSADycJAADrJkEfNyc604.jpg",
		"price": "108",
		"title": "24K黄金璀璨精华（100ml）"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/5D/8B/rBACVF5E5yyAV7YVAAGOLNdfqoA107.jpg",
		"price": "58",
		"title": "火山泥控油洁面膏"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6A/76/rBACVF1l-KqAEcGzAAFuWmii1mY835.jpg",
		"price": "78",
		"title": "赋妍明眸眼霜 淡纹紧致"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/2A/EC/rBACW14GpziAYJfCAAIHdIMcfiQ262.jpg",
		"price": "109",
		"title": "520清滢爽肤柔肤水大粉水"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/72/78/rBACW11sxCuAJpiDAAJJuwDH9eY861.jpg",
		"price": "59",
		"title": "S.S.浴室拖鞋2双装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/D1/68/rBACYV3BEG2AX6T1AAEAPXWENto222.jpg",
		"price": "99",
		"title": "无牙自动扣皮带"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/E0/56/rBACW13MvXuASEmnAAB4LgLWWZs806.jpg",
		"price": "68",
		"title": "臻果精华倍润手霜套装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/F8/52/rBACYV0IN4qAX8FMAABlIrf0gtg355.jpg",
		"price": "89",
		"title": "持久控油耐水清透散粉"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6B/D3/rBACYV1l9y6AP0eHAAIz_Ilgjas282.jpg",
		"price": "149",
		"title": "520小黑瓶淡纹精华肌底液"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/60/82/rBACW15GYA6AJdR0AAECIUf9zl8558.jpg",
		"price": "65",
		"title": "迷迭香生姜养发洗发水"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/35/4C/rBACVF8CvyCAP7pQAAGDdf9aMIM641.jpg",
		"price": "169",
		"title": "好评9999+ 泰国天然乳胶"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/70/4F/rBACYV8z5zSARHZoAAFrlzMe0VY324.jpg",
		"price": "89",
		"title": "皙颜轻垫霜+替换装-迷你款"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/70/57/rBACYV8z7QKAAu7fAAFQvpLm2-Q089.jpg",
		"price": "49",
		"title": "精雕塑型极细眉笔"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/2D/9E/rBACVFqd-fSAL8WWAAFI3KONuSE098.jpg",
		"price": "49",
		"title": "卫生巾适量型日用夜用组合"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/2D/B7/rBACW1-_o-iAd6a2AAEu6ozhYYk717.jpg",
		"price": "59",
		"title": "玻尿酸唇膏"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/B4/48/rBACVF9oywaAByFHAAEQuUhtPqk870.jpg",
		"price": "59",
		"title": "520女神专属-水果坚果麦片"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/91/5A/rBACVF9RqTqAdXsBAAIQp1Yks9c572.jpg",
		"price": "89",
		"title": "焕龄紧致乳液 提拉淡纹"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6C/5C/rBACYV1mQx2AMARmAAI2DK8agqg215.jpg",
		"price": "79",
		"title": "S.S.五星酒店护颈纤维枕"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/8D/37/rBACYV9Nze6AYaX9AAHvc49g0KE390.jpg",
		"price": "59",
		"title": "【免清洁剂】小白鞋清洁刷"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6B/5B/rBACW1vlpX-AVPJeAACzQ7j4E8M685.jpg",
		"price": "119",
		"title": "澎湃声波牙刷 Young"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/DB/3E/rBACYV683JqACSCIAAJSH-ICrHI712.jpg",
		"price": "159",
		"title": "眼部精华油+赋妍明眸眼霜"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/6F/00/rBACVF8z6OiAGMD1AAFcV7Eqgu8376.jpg",
		"price": "139",
		"title": "女士香水套装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/59/1F/rBACYV1RGCGABWu-AADvBZ-waP8446.jpg",
		"price": "159",
		"title": "莫代尔平角内裤5色装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/7E/59/rBACW1wTX8uAEBYZAAJAOHC-LLM798.jpg",
		"price": "69",
		"title": "风干牛肉干208g"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/70/60/rBACYV8z8pKADwBpAAGzHh6wal0076.jpg",
		"price": "59",
		"title": "蜂胶海盐健齿牙膏"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/D0/F9/rBACW161ILaAbg86AAG_tc0bnYE068.jpg",
		"price": "379",
		"title": "GF镇店之宝合金包角铝框箱"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6A/BD/rBACW1vkFwCAFPXeAAJMa_5571I369.jpg",
		"price": "69",
		"title": "【母婴卧室】除螨垫 4片"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/13/D3/rBACW13zWYeAVFAEAAGGrD09Wto181.jpg",
		"price": "79",
		"title": "520滋养干枯奢养护发精油"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/4F/51/rBACW11EBhqAODkJAAI0vc_mRlM338.jpg",
		"price": "59",
		"title": "金枪鱼罐头4罐减脂代餐"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/A6/23/rBACVF2cT96ADoypAAHa-ecwQaE626.jpg",
		"price": "59",
		"title": "鸡翅木筷10双装无漆无蜡"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6C/57/rBACYV1mQXyAJIrPAAHT_H8az0I485.jpg",
		"price": "69",
		"title": "滚筒式洗衣机槽清洁剂 5包"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/9A/2D/rBACW12PHAOAKS8OAAHmMioWp8s887.jpg",
		"price": "58",
		"title": "红枣膳食纤维蜂蜜蛋糕"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/97/8C/rBACW12NovSAZYdEAAGaHnBgFmM931.jpg",
		"price": "239",
		"title": "智能剃须刀低噪高效三刀头"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/69/D3/rBACYVvhL_OAJIWDAADeAat5sG4547.jpg",
		"price": "69",
		"title": "精梳棉男四季中筒商务袜X5"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/D9/95/rBACW1zeQ7mABY38AAFUIGRsYuU978.jpg",
		"price": "49",
		"title": "日用型卫生巾月经姨妈巾"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/C8/81/rBACYV25c7CAdzC8AAE0Lb6MoVw746.jpg",
		"price": "79",
		"title": "男士备长炭控油补水面膜"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/8D/2E/rBACYV9NxyWAM31-AAGoZZIRBoI306.jpg",
		"price": "99",
		"title": "520颈部提拉淡纹霜颈霜"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/50/13/rBACVF1HvQiAH_T_AAI_a0CZ858470.jpg",
		"price": "49",
		"title": "S.S.圆形护颈荞麦枕"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/56/D0/rBACVF45tVCAGOrCAABTXjk6ygc858.jpg",
		"price": "59",
		"title": "植物香氛身体乳"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/58/BC/rBACW145rxeAMySjAAD2FfAuWlc351.jpg",
		"price": "139",
		"title": "男士香水套装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/4E/2A/rBACYV1DkxiAK_Q7AAJBIWpptJ4253.jpg",
		"price": "66",
		"title": "新一代多功能车载手机支架"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/F8/10/rBACYV3eNb-AeazAAAIAEi97bBw545.jpg",
		"price": "94",
		"title": "造极阿胶糕红枣枸杞型"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/51/D9/rBACW11HoVmATOPnAAJBAp8j55M599.jpg",
		"price": "99",
		"title": "S.S.酒店风格纯棉大浴巾"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/27/B2/rBACVFpYRXyARpjMAAJB6zEWDco895.jpg",
		"price": "49",
		"title": "榉木气囊木梳"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/95/8B/rBACYV2MOAGAXLIfAADxYe72sNg105.jpg",
		"price": "282",
		"title": "沙龙级负离子电吹风"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/EF/C8/rBACYV-TyjmAHrt8AAH8DCNrgv4512.jpg",
		"price": "59",
		"title": "520洁净润温和清爽卸妆水"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/78/27/rBACVFwI8aWAKizrAADQwZpZLwc659.jpg",
		"price": "38",
		"title": "汽车风口式净化型车载香氛"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/35/06/rBACW1rVv2mAe56IAAGPk5QMbD8736.jpg",
		"price": "89",
		"title": "夏季薄款尿不湿拉拉扭扭裤"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/95/2B/rBACVF2NXsGAQgfUAAHKt3D_BCU673.jpg",
		"price": "169",
		"title": "500W强力绞肉机食物处理器"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/EB/14/rBACYV3WMZaAZOWeAAIJXPlvRHw711.jpg",
		"price": "53",
		"title": "人参牡蛎粉"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/48/FF/rBACYV0-i4yAJz41AACUwQ0bBcE848.jpg",
		"price": "31",
		"title": "新国标3孔延长线插座"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/4F/C5/rBACVF1HiCSARw2NAAHMJ7GRAWI720.jpg",
		"price": "42",
		"title": "S.S. 柔软吸水加长干发帽"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/2E/13/rBACVFqiJkSAVXXYAAIo3LU6W4g779.jpg",
		"price": "59",
		"title": "【家务必备】强韧防护手套"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/01/F9/rBACYVkT4Y-Aa5w5AAHkIKgZtG8866.jpg",
		"price": "129",
		"title": "原装进口刀头@6+1层剃须刀"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/9D/4D/rBACW12QikKAGxL2AAI2FTndk8E551.jpg",
		"price": "79",
		"title": "520洋甘菊舒活控油洗发水"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/84/4E/rBACYVwhvnWAMnFdAAI3KDrMBtw397.jpg",
		"price": "59",
		"title": "100%黑巧克力400g"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/6F/09/rBACVF8z7qCASkd4AAIOo4VvYXM640.jpg",
		"price": "199",
		"title": "男士清爽控油三件套"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/05/0A/rBACVF0cYCOAO4i8AAEWRCFSrzU483.jpg",
		"price": "249",
		"title": "智能颈椎按摩仪"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/B8/3F/rBACW16hRfKAXTjrAAEo1nbTD_0141.jpg",
		"price": "122",
		"title": "520红石榴活氧修护组合"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/D2/2A/rBACW13BMBSAbiLRAAFE8BgQ7gM223.jpg",
		"price": "35",
		"title": "可折叠便携硅胶旅行杯"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/F6/24/rBACVF0HXESAadQGAAGRBDtDr0s784.jpg",
		"price": "49",
		"title": "【植物剑麻】长柄锅刷 2只"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/07/C9/rBACYV3p82WAKYOdAADOAovbov4380.jpg",
		"price": "99",
		"title": "百花建盏主人杯"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/3F/5B/rBACVF03xQ-AWt2MAAC-v4H9Oi0210.jpg",
		"price": "89",
		"title": "乌檀木整木砧板"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/00/E6/rBACW10UL0CASpWFAACi-V3cFdk085.jpg",
		"price": "79",
		"title": "520玫瑰柔嫩花瓣沐浴露"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/E3/A0/rBACYV7CRxqAa2bmAADXCvZjeRw240.jpg",
		"price": "89",
		"title": "自然立体防水睫毛膏套组合"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/FA/0A/rBACW13fRHeAaNAWAADKpdmrjXs063.jpg",
		"price": "99",
		"title": "家用玻璃内胆保温水壶1.6L"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/00/44/rBACVFkT4aqAAC2mAAExsKAlDqg125.jpg",
		"price": "199",
		"title": "双面布丝光短T两件装10色"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/A6/22/rBACW16RbASASuI7AAHuRNaD82o067.jpg",
		"price": "69",
		"title": "芬芳丝滑沐浴套组"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/2B/1C/rBACVFp4C6-APb7AAAGPhsTVD4I113.jpg",
		"price": "259",
		"title": "四季弹力保型合体修身/2色"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/A1/E9/rBACVF6O7J2AMOJ7AAD6LMCLUXs928.jpg",
		"price": "399",
		"title": "双排扣翻领中长款风衣"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/DF/03/rBACW1-IBX6AKAS9AAHx3LbTYuQ171.jpg",
		"price": "99",
		"title": "翻扣弹盖316不锈钢保温杯"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/C4/91/rBACW121sYeAQEpQAAJKbXG52E8317.jpg",
		"price": "128",
		"title": "青岛特大鲜冻虾仁 1000g"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/9D/3D/rBACYV2RUWyAY-_IAACqYVL5SNI891.jpg",
		"price": "219",
		"title": "三防免烫商务衬衫19色可选"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/C5/03/rBACW1zCroSAOoWEAAD_Tlnnmr4062.jpg",
		"price": "79",
		"title": "家用玻璃油壶醋壶套装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/8D/47/rBACW155q3eALoTmAABLzyc-O2M262.jpg",
		"price": "69",
		"title": "酵素多效超浓缩洗衣液"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/84/B3/rBACW12APV2AQBeFAAFVcRZBxyk949.jpg",
		"price": "249",
		"title": "四季爆款高弹天丝直筒/2色"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/23/C9/rBACW1oc5FKAAMCsAAD0ZjxFUtA528.jpg",
		"price": "199",
		"title": "新疆棉免烫长袖POLO衫13色"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/4F/2A/rBACW11D61-AAwD1AAJD1eOa1GY259.jpg",
		"price": "72",
		"title": "即食猪皮800克脂肪含量低"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/01/31/rBACYV0Uf-GAHGIRAAFcprxE7lg476.jpg",
		"price": "99",
		"title": "英国温控双层防烫电热水壶"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/55/70/rBACVF_ll9OAZhlzAAF6JBg9SSs892.jpg",
		"price": "79",
		"title": "儿童温和洗发沐浴露二合一"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/23/BA/rBACYVocoqiAIYWyAAFpg46Zu0k560.jpg",
		"price": "89",
		"title": "夏季薄款尿不湿纸尿裤XL码"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/2C/41/rBACW1pyi5-ASf6nAAFwJvMdKC4284.jpg",
		"price": "89",
		"title": "钼钒钢家用菜刀"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/3E/B4/rBACYV4VdGiAGf34AAIAtGfLRD8374.jpg",
		"price": "85",
		"title": "成猫通用粮1.5kg"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6A/1D/rBACYVviWzWAblrAAAD6bQ9C-Qs119.jpg",
		"price": "99",
		"title": "智能健康体重体脂秤"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/18/6E/rBACVF35mOiATZfOAAFgRTS5S3w377.jpg",
		"price": "99",
		"title": "抗菌除氯增压过滤手持花洒"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/27/0C/rBACYVpDbyeAZPhDAAIfnERAR98361.jpg",
		"price": "59",
		"title": "304免钉挂钩 4只装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/A6/03/rBACYVyA3PmAXKXWAAIfy87UK8I180.jpg",
		"price": "39",
		"title": "3D凹凸面平板拖把 &拖布"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/49/39/rBACYV_YX8qAT-EeAAIWLFVdyFc608.jpg",
		"price": "379",
		"title": "头层软牛皮小挎包"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6A/AD/rBACVF1mIFOALBcNAAI81ZA0lN8607.jpg",
		"price": "49",
		"title": "S.S. 全棉地巾脚垫洛克特"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/70/6D/rBACYV8z-zWAc1YaAAC8nl6L17U278.jpg",
		"price": "68",
		"title": "青柠益生菌洗手液"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/1D/41/rBACW138JomAfPklAAIhsJBYqcY989.jpg",
		"price": "99",
		"title": "快速排水铜地漏防虫防臭"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/73/09/rBACYV82LlaAEHXGAAJFF5AEt-I735.jpg",
		"price": "78",
		"title": "加柔洗脸巾护肤毛巾三盒装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/A5/FD/rBACW1yAygeAVgIDAADcsrdzM4k379.jpg",
		"price": "169",
		"title": "吸黑头拔罐两用美容仪"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/B5/90/rBACW12oPiCAEQtJAAJVSbTix3I812.jpg",
		"price": "59",
		"title": "GABA酸枣仁粉（陪伴安睡）"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/8A/19/rBACW19KFkuAdIjKAAFoz_0SZzs053.jpg",
		"price": "93",
		"title": "休闲零食无色素红杏干640g"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/A3/75/rBACW16OvR6AfaC8AAC14i83iK8845.jpg",
		"price": "88",
		"title": "20片 芦荟高保湿滋养面膜"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/56/C0/rBACVF45kYCAE_YNAAD5-22EjWI440.jpg",
		"price": "139",
		"title": "金盏花植物爽肤水"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/58/BC/rBACW145sHeAU2LMAADPotMzzps446.jpg",
		"price": "68",
		"title": "灵动明眸眉笔套装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/FB/CD/rBACW13gdVKAEDFGAAGeVx_6Oc4641.jpg",
		"price": "218",
		"title": "深海修护 浓缩修护精华露"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/BC/A9/rBACW16k5l6ALEmvAADYRGybHR0707.jpg",
		"price": "99",
		"title": "植物无硅油洗发水"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/E0/51/rBACW13Mu1eASOi5AACBsFIIpOk099.jpg",
		"price": "69",
		"title": "紫苏舒缓洁面精华"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/5E/EE/rBACYV5E6NaAM90-AACyhHKBoIM682.jpg",
		"price": "79",
		"title": "鱼子酱多效日霜"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/70/56/rBACYV8z7DCAYqVOAACA04SIzjw950.jpg",
		"price": "99",
		"title": "丝缎轻雾感精华粉底液"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/D8/7F/rBACW13GjaCAUZngAAHGcxb2ZvA529.jpg",
		"price": "58",
		"title": "520香榭娇宠口红"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/01/AC/rBACVFkUGmmAF6TWAADyNA_yGUw407.jpg",
		"price": "259",
		"title": "澎湃声波牙刷 Pro"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/63/E8/rBACW11cvpqAOQfTAADLpbxAJyQ335.jpg",
		"price": "99",
		"title": "旋转两用合金针扣皮带"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/4A/C6/rBACW10_rjSAK5yoAAJDWHveGg8098.jpg",
		"price": "52",
		"title": "鱼鲜香辣酱4瓶高钙下饭酱"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/6A/15/rBACW15Tp06AA0AUAAGta5n-Sxs214.jpg",
		"price": "78",
		"title": "520淡纹紧致大眼精华霜"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/56/D2/rBACVF45u_aAdP5XAAB7G895tes606.jpg",
		"price": "138",
		"title": "寡肽胶原紧致眼膜"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/C1/CE/rBACW12zq-6AbhOYAAH73HnO7PI098.jpg",
		"price": "49",
		"title": "520男士焕活清透洁面膏"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/51/EB/rBACW11HsSqAJNvaAAC3Ur_Tjxg039.jpg",
		"price": "49",
		"title": "倍润手霜套装便携3支装"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M01/38/48/rBACW1_InxOASRg1AAGBxGJm8ks393.jpg",
		"price": "59",
		"title": "彩妆遮瑕美妆蛋礼盒"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/8D/E3/rBACVF58CDeAB0W-AAFZmAK4Two236.jpg",
		"price": "139",
		"title": "520淡斑焕白美白精华露"
	}, {
		"imgUrl": "http://bfs.biyao.com/group1/M00/0E/28/rBACVF3wtfeAKerwAAGn0TZq6TI414.jpg",
		"price": "88",
		"title": "橄榄净澈洁颜油 温和卸妆"
	}]

运行效果：