202603162259_《CSS格子（1-9 js版）》 



<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS九宫格布局 1-9（动态渲染）</title>
<style>
  * { margin:0; padding:0; box-sizing: border-box; }
  body {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 20px;
    background: #f5f5f5;
  }
  .divDom { width: 300px; }
  .divDom .name {
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
  }
  /* ===== 公共：圆角容器 ===== */
  [class^="wrap-"] {
    border:1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
  }
  .cell {
    background: #e74c3c center/cover no-repeat;
    position: relative;
  }
  /* 公共行容器 */
  .row {
    width: 100%;
    display: flex;
    gap: 1px;
  }
  /* 公共列容器 */
  .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .col .cell {
    flex: 1;
  }
  .col .cell::before {
    content: "";
    display: block;
    padding-top: 100%;
  }




 /* ========== 1格 ========= */
  .wrap-1 {
    display: flex;
  }
  .wrap-1 .cell {
    width: 100%;
    padding-top: 100%;
  }




 /* ========== 2格 ========= */
  .wrap-2 {
    display: flex;
    gap: 1px;
  }
  .wrap-2 .cell {
    flex: 1;
    padding-top: 50%;
  }




 /* ========== 3格 ========= */
  .wrap-3 {
    display: flex;
    gap: 1px;
  }
  .wrap-3 .cell-large {
    flex: 2;
    padding-top: 66.66%;
  }




 /* ========== 4格 ========= */
  .wrap-4 {
    display: flex;
    gap: 1px;
  }
  .wrap-4 .cell-large {
    flex: 3;
    padding-top: 66.66%;
  }




 /* ========== 5格 ========= */
  .wrap-5 {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
  }
  .wrap-5 .row-top .cell {
    flex: 1;
    padding-top: 50%;
  }
  .wrap-5 .row-bottom .cell {
    flex: 1;
    padding-top: 33.33%;
  }




 /* ========== 6格 ========= */
  .wrap-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
  }
  .wrap-6 .cell {
    padding-top: 100%;
  }
  .wrap-6 .cell-large {
    grid-column: span 2;
    grid-row: span 2;
    padding-top: 100%;
  }




 /* ========== 7格 ========= */
  .wrap-7 {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
  }
  .wrap-7 .row-top .cell {
    flex: 1;
    padding-top: calc(50% - 0.5px);
  }
  .wrap-7 .row-bottom .cell {
    flex: 1;
    padding-top: calc(33.33% - 0.67px);
  }




 /* ========== 8格 ========= */
  .wrap-8 {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
  }
  .wrap-8 .row-top .cell {
    flex: 1;
    padding-top: calc(50% - 0.5px);
  }
  .wrap-8 .row-bottom .cell {
    flex: 1;
    padding-top: calc(33.33% - 0.67px);
  }




 /* ========== 9格 ========= */
  .wrap-9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
  }
  .wrap-9 .cell {
    padding-top: 100%;
  }
</style>
</head>
<body>
<script>
const templates = {
  1: { cls: 'wrap-1', children: [
    { cls: 'cell' }
  ]},
  2: { cls: 'wrap-2', children: [
    { cls: 'cell' },
    { cls: 'cell' }
  ]},
  3: { cls: 'wrap-3', children: [
    { cls: 'cell cell-large' },
    { cls: 'col', children: [
      { cls: 'cell' },
      { cls: 'cell' }
    ]}
  ]},
  4: { cls: 'wrap-4', children: [
    { cls: 'cell cell-large' },
    { cls: 'col', children: [
      { cls: 'cell' },
      { cls: 'cell' },
      { cls: 'cell' }
    ]}
  ]},
  5: { cls: 'wrap-5', children: [
    { cls: 'row row-top', children: [
      { cls: 'cell' },
      { cls: 'cell' }
    ]},
    { cls: 'row row-bottom', children: [
      { cls: 'cell' },
      { cls: 'cell' },
      { cls: 'cell' }
    ]}
  ]},
  6: { cls: 'wrap-6', children: [
    { cls: 'cell cell-large' },
    { cls: 'cell', count: 5 }
  ]},
  7: { cls: 'wrap-7', children: [
    { cls: 'row row-top', children: [
      { cls: 'cell' },
      { cls: 'cell' }
    ]},
    { cls: 'row row-top', children: [
      { cls: 'cell' },
      { cls: 'cell' }
    ]},
    { cls: 'row row-bottom', children: [
      { cls: 'cell' },
      { cls: 'cell' },
      { cls: 'cell' }
    ]}
  ]},
  8: { cls: 'wrap-8', children: [
    { cls: 'row row-top', children: [
      { cls: 'cell' },
      { cls: 'cell' }
    ]},
    { cls: 'row row-bottom', children: [
      { cls: 'cell' },
      { cls: 'cell' },
      { cls: 'cell' }
    ]},
    { cls: 'row row-bottom', children: [
      { cls: 'cell' },
      { cls: 'cell' },
      { cls: 'cell' }
    ]}
  ]},
  9: { cls: 'wrap-9', children: [
    { cls: 'cell', count: 9 }
  ]}
};




function createNode(desc, pics, idx) {
  if (desc.count) {
    return Array.from({ length: desc.count }, () => {
      const el = document.createElement('div');
      el.className = desc.cls;
      if (desc.cls.includes('cell') && idx.value < pics.length) {
        el.style.backgroundImage = `url(${pics[idx.value++]})`;
      }
      return el;
    });
  }




 const el = document.createElement('div');
  el.className = desc.cls;




 const isCell = desc.cls.includes('cell') && !desc.children;
  if (isCell && idx.value < pics.length) {
    el.style.backgroundImage = `url(${pics[idx.value++]})`;
  }




 if (desc.children) {
    for (const child of desc.children) {
      const nodes = createNode(child, pics, idx);
      if (Array.isArray(nodes)) {
        nodes.forEach(n => el.appendChild(n));
      } else {
        el.appendChild(nodes);
      }
    }
  }




 return el;
}




function buildGallery(product, container) {
  const pics = product.pics.slice(0, 9);
  const count = pics.length;
  const tpl = templates[count];
  if (!tpl) return;




 const divDom = document.createElement('div');
  divDom.className = 'divDom';




 const title = document.createElement('div');
  title.className = 'name';
  title.textContent = `${product.name}（${pics.length}张）`;




 divDom.appendChild(title);
  const wrap = createNode(tpl, pics, { value: 0 });
  divDom.appendChild(wrap);
  container.appendChild(divDom);
}




// 示例数据，id 保持唯一
const products = [
  {
    id: 1,
    name: "商品A",
    pics: ["https://picsum.photos/400/400?random=1"]
  },
  {
    id: 2,
    name: "商品B",
    pics: [
      "https://picsum.photos/400/400?random=2",
      "https://picsum.photos/400/400?random=3"
    ]
  },
  {
    id: 3,
    name: "商品C",
    pics: [
      "https://picsum.photos/400/400?random=8",
      "https://picsum.photos/400/400?random=9",
      "https://picsum.photos/400/400?random=10",
      "https://picsum.photos/400/400?random=11"
    ]
  },
  {
    id: 4,
    name: "商品D",
    pics: [
      "https://picsum.photos/400/400?random=15",
      "https://picsum.photos/400/400?random=4",
      "https://picsum.photos/400/400?random=5",
      "https://picsum.photos/400/400?random=6",
      "https://picsum.photos/400/400?random=7",
      "https://picsum.photos/400/400?random=12",
      "https://picsum.photos/400/400?random=13",
      "https://picsum.photos/400/400?random=14",
      "https://picsum.photos/400/400?random=16"
    ]
  }
];




// 渲染所有商品
products.forEach(p => buildGallery(p, document.body));
</script>
</body>
</html>


 




 








            

            
posted @ 
2026-03-16 23:01 
Coca-code 
阅读(25) 
评论(0) 
 
收藏 
举报