先上以层布局图 （8层 10列，每列3个抽屉）:
鼠标滑动效果： 
以层布局 代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D 货架</title><link href="//unpkg.com/layui@2.9.21-rc.3/dist/css/layui.css" rel="stylesheet"><style>body, html {width: 100%; height: 100%;margin: 0;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;}.shelf-container {width: 70%; height: 50%;display: flex;flex-direction: column; justify-content: space-between; align-items: center;position: relative;border: 6px solid #8B4513; border-top: 10px solid #8B4513; border-bottom: 10px solid #8B4513; box-sizing: border-box;background: linear-gradient(to bottom, #ccb89c, #938066); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transform-origin: center;}.column-labels {width: 100%;display: flex;justify-content: space-around; align-items: center;padding: 10px 0; background-color: #8B4513; color: white; font-size: 20px; font-weight: bold; }.column-labels span {flex: 1; text-align: center; }.column-labels .placeholder {width: 60px; }.layer {width: 100%;height: 18%; display: flex;justify-content: space-around; align-items: center;box-sizing: border-box;position: relative;border-top: 5px solid #8B4513; background-color: #D2B48C; box-shadow: inset -3px 20px 5px rgba(6, 0, 0, 0.1); border-radius: 5px; }.layer:first-child {border-top: none; }.layer-label { width: 30px; display: flex;justify-content: center;align-items: center;font-size: 24px; font-weight: bold; }.cell {width: 8%; height: 80%; display: flex;flex-direction: row; justify-content: space-between; align-items: center;background-color: #ffcc00; border: 2px solid #A0522D; box-sizing: border-box;padding: 2px; border-radius: 8px; box-shadow: 20px 1px 20px 1px rgb(149 88 0 / 31%) }.sub-cell {width: 30%; height: 90%; background-color: #FFF; border: 1px solid #A0522D; display: flex;justify-content: center;align-items: center;font-size: 10px; color: #333; cursor: pointer; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1); }.sub-cell:hover {background-color: #EED9C4; }</style>
</head>
<body><div class="shelf-container" id="shelf-container"><div class="column-labels" id="column-labels"><div class="placeholder"></div></div></div><script src="//unpkg.com/layui@2.9.21-rc.3/dist/layui.js"></script><script>const layers = 8; const cellsPerLayer = 10; const subCellsPerCell = 3; const shelfContainer = document.getElementById('shelf-container');const columnLabels = document.getElementById('column-labels');for (let i = 1; i <= cellsPerLayer; i++) {const label = document.createElement('span');label.textContent = `A${i}`; columnLabels.appendChild(label);}for (let i = layers; i >= 1; i--) {const layer = document.createElement('div');layer.className = 'layer';const layerLabel = document.createElement('div');layerLabel.className = 'layer-label';layerLabel.textContent = i; layer.appendChild(layerLabel);for (let j = 0; j < cellsPerLayer; j++) {const cell = document.createElement('div');cell.className = 'cell';for (let k = 0; k < subCellsPerCell; k++) {const subCell = document.createElement('div');subCell.className = 'sub-cell';subCell.textContent = k + 1; subCell.setAttribute('lay-tips', `第 ${i} 层，第 A${j + 1} 列，第 ${k + 1} 小格`); cell.appendChild(subCell); }layer.appendChild(cell); }shelfContainer.appendChild(layer); }layui.use('layer', function () {const layer = layui.layer;document.querySelectorAll('.sub-cell').forEach(subCell => {subCell.addEventListener('mouseenter', function () {const tips = this.getAttribute('lay-tips'); layer.tips(tips, this, {tips: [1, '#8C4213'], time: 0, });});subCell.addEventListener('mouseleave', function () {layer.closeAll('tips'); });});});</script>
</body>
</html>
以格子直接布局8*10 效果：
以列布局 代码：
3D 货架
<!-- 引入 Layui -->
<script src="layui/layui.js"></script>
<script>// 定义货架的层数和列数const layers = 8; /* 8 层 */const columns = 10; /* 10 列 */const subCellsPerCell = 3; /* 每个格子有 3 个小格子 */// 获取货架容器const shelfContainer = document.getElementById('shelf-container');// 遍历生成每一层for (let i = 0; i < layers; i++) {// 遍历生成每一列for (let j = 0; j < columns; j++) {// 创建格子元素const cell = document.createElement('div');cell.className = 'cell';// 遍历生成每个小格子for (let k = 0; k < subCellsPerCell; k++) {// 创建小格子元素const subCell = document.createElement('div');subCell.className = 'sub-cell';subCell.textContent = k + 1; /* 小格子内容 */subCell.setAttribute('lay-tips', `第 ${i + 1} 层，第 ${j + 1} 列，第 ${k + 1} 小格`); /* 设置提示文本 */cell.appendChild(subCell); /* 将小格子添加到格子中 */}shelfContainer.appendChild(cell); /* 将格子添加到货架容器中 */}}// 初始化 Layui 的工具提示layui.use('layer', function () {const layer = layui.layer;// 为每个小格子绑定鼠标滑过事件document.querySelectorAll('.sub-cell').forEach(subCell => {subCell.addEventListener('mouseenter', function () {const tips = this.getAttribute('lay-tips'); /* 获取提示文本 */layer.tips(tips, this, {tips: [1, '#8C4213'], /* 提示框样式 */time: 0, /* 不自动关闭 */});});subCell.addEventListener('mouseleave', function () {layer.closeAll('tips'); /* 关闭提示框 */});});});
</script>
