可以使用layui的grid布局来展示从后端获取的商品图片和简介等信息,具体步骤如下:

  1. 引入layui的相关CSS和JavaScript文件。
  2. 在HTML页面中定义一个grid容器,设置class为layui-grid。
  3. 在grid容器中添加div元素,设置class为layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2。这样可以实现在不同屏幕大小下的响应式布局,每行显示6个小块。
  4. 在每个div元素中添加商品图片和简介等信息。
  5. 使用JavaScript从后端获取商品数据,并动态生成对应的div元素。

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品展示</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
    <div class="layui-grid">
        <div class="layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2">
            <img src="商品图片URL" alt="商品图片">
            <div class="goods-info">
                <h3>商品名称</h3>
                <p>商品简介</p>
            </div>
        </div>
        <!-- 其他商品元素 -->
    </div>

    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
    <script>
        layui.use('element', function(){
            var element = layui.element;
        });
        
        // 使用JavaScript从后端获取商品数据,并动态生成div元素
        // 示例代码
        var goodsData = [
            {
                image: '商品图片URL',
                name: '商品名称',
                intro: '商品简介'
            },
            // 其他商品数据
        ];
        
        var gridContainer = document.querySelector('.layui-grid');
        for (var i = 0; i < goodsData.length; i++) {
            var div = document.createElement('div');
            div.className = 'layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2';
            
            var img = document.createElement('img');
            img.src = goodsData[i].image;
            img.alt = '商品图片';
            
            var goodsInfo = document.createElement('div');
            goodsInfo.className = 'goods-info';
            
            var h3 = document.createElement('h3');
            h3.innerText = goodsData[i].name;
            
            var p = document.createElement('p');
            p.innerText = goodsData[i].intro;
            
            goodsInfo.appendChild(h3);
            goodsInfo.appendChild(p);
            
            div.appendChild(img);
            div.appendChild(goodsInfo);
            
            gridContainer.appendChild(div);
        }
    </script>
</body>
</html>

以上代码中,goodsData是从后端获取的商品数据,包含图片URL、名称和简介等信息。通过JavaScript动态生成div元素,并将商品数据填充到对应的元素中。使用layui的grid布局实现每行显示6个商品小块,并在不同屏幕大小下自适应布局


原文地址: https://www.cveoy.top/t/topic/h208 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录