json封装数据，然后通过创造的标签调用

动态图片列表加载

转载于 2016-11-25 13:51:00 发布 · 46 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Model-Zachary/p/6101318.html

文章标签：

#json

本文介绍了一种使用JavaScript动态创建图片列表的方法，并通过设置图片的高度和宽度等属性来展示一张名为Pinterest•The world的图片。

<ul class="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

 1 var jp = {
 2              "height":"354px",
 3              "image":"http://www.wookmark.com/images/thumbs/629761_wookmark.jpg",
 4              "title":"Pinterest • The world",
 5              "width":"236px"
 6             };
 7     var UL = document.getElementsByClassName('list')[0];
 8     var LI = UL.getElementsByTagName('li');
 9     
10     for(var i=0;i<LI.length;i++){
11         var img = document.createElement("img");
12             function atrbute(a,b){  //会用到两次所以就封装一个函数传入参数进行调用即可
13                 img.setAttribute(a,b);  
14                 } 
15             atrbute("src",jp.image);//传参调用
16             atrbute('title',jp.title);//传参调用
17             img.style.width=jp.width;
18             img.style.height=jp.height;
19             LI[i].appendChild(img);         
20     }