动态图库的等高不同宽度布局

Question

我正在开发一个 codeigniter 网站，目前正在尝试实现这样的布局，其中我对行中的所有图像具有相同的高度但宽度不同。

我的图像存储在 MYSQL 数据库中，其中 url 路径指向它们所在的目录。我还存储了它们的高度和宽度（高度和宽度以像素为单位存储）。

这是获取 PhotoController 中内容的 sql

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

然后在主页视图中，这是我目前所拥有的。 （使用 bootstrap 4 进行样式设置）

<div class="container">
  <div class="row">
    <?php foreach ($data as $row) : ?>
      <div class="col-md-4 col-lg-6">
        <img src="<?= base_url($row['photo_path']); ?>" class="img-lazy img-fluid">
      </div>
    <?php endforeach; ?>
  </div>
</div>

我被困在这里下一步该做什么。

Answer 1

html

<div class="masonry-with-columns-2">
  <?foreach ($data as $row){?>
  <div>
    img here
  </div>
  <?}?>
</div>

scss

// Within style tags in your html file
body {
  margin: 0;
  padding: 1rem;
}
// SCSS
// Masonry layout horizontal
.masonry-with-columns-2 {
  display: flex;
  flex-wrap: wrap;
  div {
    height: 150px;
    line-height: 150px;
    background: #9B1B30;
    color: white;
    margin: 0 1rem 1rem 0;
    text-align: center;
    font-weight: 900;
    font-size: 2rem;
    flex: 1 0 auto;
  }
  @for $i from 1 through 36 {
    div:nth-child(#{$i}) {
      $h: (random(400) + 70) + px;
      width: $h;
    }
  }
}

来源https://mdbootstrap.com/docs/angular/layout/masonry/