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

let arr = [
    {
        id: 1,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题一'
    },
    {
        id: 2,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题二'
    },
    {
        id: 3,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题三'
    },
    {
        id: 4,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题四'
    },
    {
        id: 5,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题五'
    },
    {
        id: 6,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题六'
    },
    {
        id: 7,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题七'
    },
    {
        id: 8,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题八'
    },
    {
        id: 9,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题九'
    },
    {
        id: 10,
        imgSrc: './img/1-19102QA0400-L.jpg',
        title: '产品标题十'
    }
];
console.log(masonryElement);
// 接下来，我们创建一个循环来添加10个<li>元素  
for (let i = 0; i < arr.length; i++) {
    // 创建一个新的<li>元素  
    var liElement = document.createElement('li');

    liElement.innerHTML =
        `
    <li class="col-xs-6 col-sm-3"> 
        <a href="./proDetail.html?id=${arr[i].id}" title="${arr[i].title}">
          <p class="pro-img"> <img src="${arr[i].imgSrc}" alt="${arr[i].title}"> </p>
          <p class="pro-text">${arr[i].title}</p>
        </a> 
    </li>
    `;


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