/*
*   使用方式调用PAGE.init(event)传入父级ID
*   @gap设置项目间隙
*/
const PAGE = {
    data: {
        gap:10
    },
    init: function (id) {
        this.render(id);    
    },
    render: function (id) {
        let listWidh = document.getElementById(id).offsetWidth;
        let items = document.getElementById(id).children;
        let itemWidth = items[0].offsetWidth;
        let gap = PAGE.data.gap;
        //项目父级宽度/项目宽度+间隙 = 列数
        let columns = parseInt(listWidh / (itemWidth + gap));
        let arr = [];

        for (var i = 0; i < items.length; i++){
            if (i < columns) {
                items[i].style.top = 0;
                items[i].style.left = (itemWidth + gap) * i + 'px';
                arr.push(items[i].offsetHeight)
            } else {
                let minHeight = arr[0];
                let index = 0;
                for (let i = 0; i < arr.length; i++){
                    if (minHeight > arr[i]) {
                        minHeight = arr[i];
                        index = i;
                    }
                }
                items[i].style.top = arr[index] + gap + 'px';
                items[i].style.left = items[index].offsetLeft + 'px';
                arr[index] = arr[index] + items[i].offsetHeight + gap;
            }
        }


    }
}
//监听父级size变化
window.onresize = function () {
    PAGE.init();
};