CodeIgniter站点实现动态图片画廊同行等高不等宽布局咨询

1. 后端数据预处理 #

你已经拿到了图片的原始宽高数据，先在控制器层计算每张图的宽高比，避免前端重复计算减少布局抖动：

$data['data'] = $this->model 
  ->select('photo_path, photo_height, photo_width') 
  ->get() 
  ->getResultArray();

// 新增：遍历计算每张图的宽高比
foreach ($data['data'] as &$row) {
    $row['aspect_ratio'] = round($row['photo_width'] / $row['photo_height'], 2);
}
unset($row); // 解除引用避免后续逻辑异常

2. 自定义布局样式 #

放弃原有的固定栅格col-md-4规则，改用Flex布局实现等高不等宽效果，先添加自定义CSS样式：

/* 画廊容器样式 */
.gallery-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 图片之间的间距，可自行调整 */
}
/* 单个图片容器样式 */
.gallery-item {
  flex-grow: 1;
  min-width: 140px; /* 最小宽度避免移动端图片过窄，可自行调整 */
}
/* 图片通用样式 */
.gallery-img {
  height: 220px; /* 统一行高，可根据需求调整数值 */
  width: 100%;
  object-fit: cover; /* 保持图片比例，裁剪溢出部分避免拉伸 */
  border-radius: 4px; /* 可选，添加圆角效果 */
}

3. 视图代码调整 #

修改原有视图结构，绑定宽高比参数：

<div class="container">
  <div class="gallery-wrap">
    <?php foreach ($data as $row) : ?>
      <div class="gallery-item" style="flex-basis: <?= $row['aspect_ratio'] * 110 ?>px;">
        <img src="<?= base_url($row['photo_path']); ?>" class="img-lazy gallery-img" alt="画廊图片">
      </div>
    <?php endforeach; ?>
  </div>
</div>

4. 响应式适配（可选） #

如果需要不同屏幕尺寸下适配不同行高，添加媒体查询即可：

@media (max-width: 768px) {
  .gallery-img {
    height: 160px;
  }
  .gallery-item {
    min-width: 100px;
  }
}

以上方案利用后端返回的原始图片比例计算宽度，不会出现图片加载前布局跳动的问题，完全匹配你需要的同行等高、宽度按原始比例自适应的效果。

内容的提问来源于stack exchange，提问作者user6657492