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

let arr = [
    {
        id: 1,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 2,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 3,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 4,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 5,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 6,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 7,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 8,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    },
    {
        id: 9,
        imgSrc: './img/1-19102ZT64c96.jpg',
        title: '三点教您选择营销型网站和展示型网站',
        des: '三点教您选择营销型网站和展示型网站 不少企业对于营销型网站的理解并不是很透彻，导致了这些企业在建设这些网站方面其最终的结果',
        timeData: '2024-07-15'
    }
];
console.log(masonryElement);
// 接下来，我们创建一个循环来添加10个<li>元素  
for (let i = 0; i < arr.length; i++) {
    // 创建一个新的<li>元素  
    var liElement = document.createElement('li');

    liElement.innerHTML =
        `
    <!--图片尺寸378*278-->
    <li class="col-sm-4"> 
        <a href="newsDetail.html?id=1" title="${arr[i].title}">
                <p class="news-img"> <img src="${arr[i].imgSrc}" alt="${arr[i].title}"> </p>
                <div class="news-text">
                    <h3 class="name">${arr[i].title}</h3>
                <p class="desc">${arr[i].des}</p>
            <span class="date">${arr[i].timeData}</span>
            </div>
        </a> 
    </li>
    `;


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