百度的这种随机目录是如何动态生成布局？

Question

vue获取到20条数据，如何平分展示？

Answer 1

模拟的数据

export const islandDetail = opation => {
    const template = {
        code: 200,
        data: {
            'list': [
                {
                    id: '1',
                    title: '湖泊概况',
                    'children': [
                        {
                            id: '1.1',
                            title: '位置境域',
                            children: []
                        },
                        {
                            id: '1.2',
                            title: '地质构造',
                            children: []
                        },
                        {
                            id: '1.3',
                            title: '流域概况',
                            children: []
                        }
                    ]
                },
                {
                    id: '2',
                    title: '气候特征',
                    'children': []
                },
                {
                    id: '3',
                    title: '水文特征',
                    'children': [
                        {
                            id: '3.1',
                            title: '水文水质',
                            children: []
                        },
                        {
                            id: '3.2',
                            title: '水位',
                            children: []
                        },
                        {
                            id: '3.3',
                            title: '生态特征',
                            children: []
                        },
                        {
                            id: '3.4',
                            title: '形态特点',
                            children: []
                        }
                    ]
                },
                {
                    id: '4',
                    title: '自然资源',
                    'children': []
                },
                {
                    id: '5',
                    title: '治理开发',
                    'children': [
                        {
                            id: '5.1',
                            title: '旅游开发',
                            children: []
                        },
                        {
                            id: '5.2',
                            title: '环境治理',
                            children: []
                        },
                        {
                            id: '5.3',
                            title: '水利工程',
                            children: []
                        }
                    ]
                },
                {
                    id: '6',
                    title: '最佳旅游时间',
                    'children': []
                },
                {
                    id: '7',
                    title: '治理开发',
                    'children': [
                        {
                            id: '7.1',
                            title: '外部交通',
                            children: []
                        },
                        {
                            id: '7.2',
                            title: '内部交通',
                            children: []
                        }
                    ]
                },
            ]
        },
        message: 'Success'
    }
    return Mock.mock(template)
}

页面布局

组件获取数据

islandDetail().then(res=> {
                this.directory = res.data.list
                this.directory.forEach((item,index) => {
                    item.order = index+1
                })
                //转化为一维数组
                for(let i= 0; i < this.directory.length; i++) {
                    if(this.directory[i].children.length) {
                        this.directory = this.directory.slice(0,i+1).concat(this.directory[i].children,this.directory.slice(i+1))
                        delete this.directory[i].children
                    }
                }
                //平分
                let arr2d = [this.directory1, this.directory2, this.directory3, this.directory4]
                if (this.directory.length >= 4) {
                    let count = 0;
                    for (let arr of arr2d) {
                        count++;
                        if (count != 4) {
                            arr.push(...this.directory.slice(Math.round(this.directory.length / 4) * (count - 1), Math.round(this.directory.length / 4) * count));
                        } else {
                            arr.push(...this.directory.slice(Math.round(this.directory.length / 4) * (count - 1)));
                        }
                    }
                }
             })

Answer 2

f12一下不就知道了
float+固定宽度

Answer 3

用了vue框架的话，一般会同时使用一个UI库，然后可以看看UI组件库里的栅格布局就可以实现啦