使用layui的grid布局将从后端获取的商品图片简介等进行展示
可以使用layui的grid布局来展示从后端获取的商品图片和简介等信息,具体步骤如下:
- 引入layui的相关CSS和JavaScript文件。
- 在HTML页面中定义一个grid容器,设置class为layui-grid。
- 在grid容器中添加div元素,设置class为layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2。这样可以实现在不同屏幕大小下的响应式布局,每行显示6个小块。
- 在每个div元素中添加商品图片和简介等信息。
- 使用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 著作权归作者所有。请勿转载和采集!