HTML+jQuery+CSS 实现响应式图片展示布局 - 3张横排，6排竖排 - 常规

以下代码示例展示了如何使用 HTML、jQuery 和 CSS 创建一个响应式图片展示布局，其中包含 3 张图片横排、6 排竖排，以及首页文字介绍产品和下方使用图片的布局。样式方面可以根据需求进行调整。

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片展示</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="container">
    <div class="intro">
      <h1>产品介绍</h1>
      <p>这是一个产品的介绍文字，可以包含多行内容，让用户更好地了解产品的特点和优势。</p>
      <img src="product.png" alt="产品图片">
    </div>
    <div class="gallery">
      <div class="row">
        <div class="col">
          <img src="image1.jpg" alt="图片1">
        </div>
        <div class="col">
          <img src="image2.jpg" alt="图片2">
        </div>
        <div class="col">
          <img src="image3.jpg" alt="图片3">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="image4.jpg" alt="图片4">
        </div>
        <div class="col">
          <img src="image5.jpg" alt="图片5">
        </div>
        <div class="col">
          <img src="image6.jpg" alt="图片6">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="image7.jpg" alt="图片7">
        </div>
        <div class="col">
          <img src="image8.jpg" alt="图片8">
        </div>
        <div class="col">
          <img src="image9.jpg" alt="图片9">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="image10.jpg" alt="图片10">
        </div>
        <div class="col">
          <img src="image11.jpg" alt="图片11">
        </div>
        <div class="col">
          <img src="image12.jpg" alt="图片12">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="image13.jpg" alt="图片13">
        </div>
        <div class="col">
          <img src="image14.jpg" alt="图片14">
        </div>
        <div class="col">
          <img src="image15.jpg" alt="图片15">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="image16.jpg" alt="图片16">
        </div>
        <div class="col">
          <img src="image17.jpg" alt="图片17">
        </div>
        <div class="col">
          <img src="image18.jpg" alt="图片18">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS 代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.intro {
  text-align: center;
  margin-bottom: 50px;
}

.intro h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.intro p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.intro img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.col {
  flex: 1;
  margin-right: 20px;
}

.col:last-child {
  margin-right: 0;
}

.col img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .col {
    flex-basis: calc(33.33% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .col:last-child {
    margin-right: 0;
  }
}

jQuery 代码：

// 在窗口大小改变时重新计算图片列的宽度
$(window).resize(function() {
  var colWidth = $('.col').width();
  $('.col').height(colWidth);
});

// 页面加载时计算图片列的宽度
$(document).ready(function() {
  var colWidth = $('.col').width();
  $('.col').height(colWidth);
});

说明：

HTML 中使用了一个容器 div.container 来包含整个页面内容，其中包含了一个介绍产品的 div.intro 和一个图片展示的 div.gallery；
在 div.intro 中包含了一个 h1 标题、一段文字介绍和一张产品图片；
在 div.gallery 中使用了 flex 布局来实现图片的排列，每一行使用一个 div.row 包含，每个图片使用一个 div.col 包含；
在 CSS 中设置了一些基本样式，包括去除默认边距和设置盒模型为 border-box；
在 CSS 中设置了容器的最大宽度、介绍部分的居中、图片的自适应宽度和高度；
在 CSS 中使用了媒体查询来实现在窗口宽度小于 768px 时，每个图片列的宽度为 33.33%；
在 jQuery 中使用了 resize 方法来在窗口大小改变时重新计算每个图片列的高度，保证图片的高度与宽度相等；
在 jQuery 中使用了 ready 方法来在页面加载时计算每个图片列的高度。

效果截图：

图片展示效果截图