国产沈阳熟女视频|骚视频97网站一区日本在线视频|久1社区在线视频|综合久久国外自产拍无码精品视频|亚洲欧美Tv先锋|综合五月天网址制服丝袜在线露脸|1024欧美手机视频我不卡|日本二区欧美亚洲国产|丁香五月婷婷五月|综合 另类 一区

如圖所示，客戶出了一個(gè)很特殊的設(shè)計(jì)稿。

每一行都下面都會(huì)有一條橫線。

然后數(shù)據(jù)又是通過后臺(tái)來循環(huán)輸出的。

這樣的設(shè)計(jì)要循環(huán)輸出單個(gè)數(shù)據(jù)的時(shí)候，就有點(diǎn)麻煩。

同時(shí)，雖然一行三個(gè)，但是第一個(gè)居左，第二個(gè)居中，第三個(gè)居右。

先看HTML生成：

 {hmcms:list num=10 order='sorting asc,id desc'}          
      <div class="caselist wow fadeIn">
        <a href="[list:link]" target="_blank">
            <div class="case-box"><img src="[list:ico]"></div>
            <div class="desc mt-4">
                <div class="title text-center fs-16 fs-sm-18 mb-2 color333">[list:title]</div>
                <div class="subtitle text-center fs-14 fs-sm-16">[list:subtitle]</div>
            </div>
        </a>
      </div>
       {/hmcms:list}

下面是CSS:

 .case-row {
      border-bottom: 2px solid #e6e6e6;   
      padding:20px 0 10px 0;
    }
    .caselist {
    display: inline-block;   /* 改為 inline-block，使其寬度為內(nèi)容寬度 */
    width: auto;
    text-align: center;
    margin: 50px 0 10px;     /* 你可以調(diào)整上下距離 */
    vertical-align: top;     /* 保證多行垂直對(duì)齊 */
    }

    .case-box {
     width: 300px;   
    }

    .case-box img {
       width:300px;
       height: 420px;
      object-fit: cover;
      display: block;
    }
    
    @media(max-width: 768px){
        .caselist { 
        display: block; 
        width: 100%; 
        } 
    }

然后加上JS：

<script>
document.addEventListener('DOMContentLoaded', function () {
  const container = document.querySelector('.case-list-box');
  if (!container) return;
  // 保存原始 items（從模板輸出的 .caselist）
  const originalItems = Array.from(container.querySelectorAll('.caselist'));

  function rebuild() {
    const w = window.innerWidth;
    // 決定每行幾列（與你的斷點(diǎn)一致）
    const perRow = (w < 992) ? 2 : 3;

    // 清空容器并重建 rows
    container.innerHTML = '';
    for (let i = 0; i < originalItems.length; i += perRow) {
      const rowItems = originalItems.slice(i, i + perRow);
      const row = document.createElement('div');
      row.className = 'row case-row';

      // 為每個(gè) item 創(chuàng)建 col 并根據(jù)位置設(shè)置對(duì)齊
      rowItems.forEach((item, idx) => {
        const col = document.createElement('div');

        // 基本的列類（在不同屏寬下控制列寬）
        // 注意：col-lg-4 在大屏?xí)r每列三等分；col-6 在窄屏?xí)r兩列
        col.className = 'col-6 col-md-6 col-lg-4 d-flex';

        // 決定該列內(nèi)部的水平對(duì)齊（使 .caselist 在 col 內(nèi)左/中/右）
        let alignClass = 'justify-content-center'; // 默認(rèn)居中
        if (perRow === 2) {
          // 兩列模式：都居中
          alignClass = 'justify-content-center';
        } else { // perRow === 3
          if (rowItems.length === 3) {
            // 完整三列：第1 start，第2 center，第3 end
            alignClass = (idx === 0) ? 'justify-content-start' :
                         (idx === 1) ? 'justify-content-center' : 'justify-content-end';
          } else if (rowItems.length === 2) {
            // 大屏最后一行只有兩個(gè)：我們按 [start, center] 布局（通常比兩邊留白更協(xié)調(diào)）
            alignClass = (idx === 0) ? 'justify-content-start' : 'justify-content-center';
          } else {
            // 只有一個(gè)元素（最后一行僅1個(gè)）——左對(duì)齊
            alignClass = 'justify-content-start';
          }
        }

        // 把對(duì)齊類加上去
        col.className = col.className + ' ' + alignClass;

        // 把原始 item 節(jié)點(diǎn)插入（節(jié)點(diǎn)會(huì)被移動(dòng)，不會(huì)復(fù)制）
        col.appendChild(item);
        row.appendChild(col);
      });

      container.appendChild(row);
    } // end for
  } // end rebuild

  // 初次構(gòu)建 & resize 監(jiān)聽（防抖）
  rebuild();
  let timer = null;
  window.addEventListener('resize', function () {
    clearTimeout(timer);
    timer = setTimeout(rebuild, 120);
  });
});
</script>