简易的APP两栏瀑布流布局

网上查找了许多瀑布流布局发现，自己想要的就是APP商城的两栏瀑布流布局，不需要那么多条件，搜索了好久找不到，于是自己写一个希望踏入前端的新手不用像我一样白白耗费那么多的时间

效果图如下：

样式具体代码如下：

代码片

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html,
    body {
        width: 100%;
        height: 100%;
    }
    .box {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .item {
  
        width: 50%;
        display: inline-block;
        border: 1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        break-inside: avoid;
    }
    .item:nth-child(2n) {
        color: yellow;
     float: right;
    }
    .item:nth-child(2n+1) {
        color: red;
        float: left;
    }
    li {
        list-style: none;
    }
    .item img {
        width: 100%;
    }
</style>

---

<button id="btn">添加三张图片</button>
<ul class="box">
    <li class="item">
        <img src="./img/1.png" alt="" />1
    </li>
    <li class="item">
        <img src="./img/2.png" alt="" />2
    </li>
    <li class="item">
        <img src="./img/2.png" alt="" />3
    </li>
    <li class="item">
        <img src="./img/1.png" alt="" />4
    </li>
</ul>

---------------------------

<script>
    function clickAdd() {
        console.log(1)
        let str = "";
        // 先获取
        var b=5;
        var box = document.getElementsByClassName("box")[0]
        let k = 6 / 2; //一次加6条数据  分为两组 一组大约为3个 
        for (let i = 0; i < 6; i++) {
            str += `<li class="item">
                         <img src="./img/${i % 2 == 1 ? 2 : 1}.png" alt="" />${b}
                       </li>`
            b++;
        }
        // 添加 子元素 box

        box.innerHTML += str
        str = null;
    }
    var btn = document.getElementById("btn")
    btn.onclick = clickAdd
</script>

本人初学萌新 不足之处请各位斧正