layui后端数据动态渲染（九宫格）

最新推荐文章于 2023-09-15 15:55:05 发布

原创

最新推荐文章于 2023-09-15 15:55:05 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #css #html

该博客介绍了如何利用layui框架，结合后端返回的数据，动态渲染生成九宫格布局。通过展示具体的接口数据和前端代码实例，详细阐述了这一过程。

页面大致就是这种效果，

接口返回数据

前端代码

//css
#ti1 {
        display: flex;
        flex-wrap: wrap;
      
        justify-content: space-between;
    }

    #ti1 span {
        width: 8.5vw;
        height: 6.5vh;
        margin-left: 2vh;
        margin-top: 1.5vh;
    }

    .tibeng {
        color: white;
    }
//html
<div>              
       <div id="ti1">
       </div>
</div>
//js
    $.ajax({
            url: '接口',
            dataType: 'json',
            type: 'get',
            data: {},
            success: function (resData) {
                var menu = ""
                var resstation = "",
                    resstation = resData.result;
                for (var i = 0;