js 操作dom高度

场景：

vue使用遍历渲染列表，规定一行两个（宽度50%）， 并且每行高度保持一致, 如果最后一行只有一个，那么就（宽度100%）

问题

item的内容是自适应的，没有固定高度，所以需要计算同行最高的height，并保持一致。

上代码

html

    <ul>
        <li class="item" v-for="item in list">{{item}}</li>
    </ul>

js

    data() {
        return {
            list: ['内容长','内容长','内容长','内容长','内容长'],
        }
    },
    methods: {
        initLastItem: function () {
            this.$nextTick(() => {
                let itemPanel = [...document.getElementsByClassName('item')];
                for (let i = 0; i < itemPanel.length; i += 2) {
                    let prev = itemPanel[i];
                    let next = itemPanel[i + 1];
                    if (next) {
                        let prevHeight = prev.offsetHeight;
                        let nextHeight = next.offsetHeight;
                        let height = Math.max(prevHeight, nextHeight);
                        prev.style.height = height + 'px';
                        next.style.height = height + 'px';
                    } else {
                        prev.style.width = '100%';
                    }
                }
            })
        }
    },

css

    .item{
      width: 50%;
      &:nth-of-type(even){
        width: 49%;
        margin-left: 1%;
      }
    }