// 首先，获取id为masonry的元素  
var masonryElement = document.getElementById('masonry');

let arr = [
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书一'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书二'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书三'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书四'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书五'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书六'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书七'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书八'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书九'
    },
    {
        imgSrc:'./img/1-19102QPJ40-L.jpg',
        title:'荣誉证书十'
    }
];

// 接下来，我们创建一个循环来添加10个<li>元素  
for (let i = 0; i < arr.length; i++) {
    // 创建一个新的<li>元素  
    var liElement = document.createElement('li');

    liElement.innerHTML = 
    `
    <li class="col-sm-4"> <a href="javascript:;">
    <!--图片尺寸728*460-->
    <p class="elc-img"> <img src="${arr[i].imgSrc}" alt="${arr[i].title}"> </p>
    <p class="elc-text">${arr[i].title}</p>
    </a> </li>
    `;


    // 将创建的<li>元素添加到id为masonry的元素中  
    masonryElement.appendChild(liElement);
}