如何让不同尺寸的图像在画廊页面中成排平滑地堆叠在一起？

Question

它有那个不受欢迎的间距。 这是我要实现的目标的示例： https://codepen.io/LilyAnne56/details/jOvqgZp 他们在 html 中使用了三个 div 标签。我有从数据库上传图像的 PHP 代码，所以我不确定如何在 php 中编写代码。

这是 CSS：

container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: center;
margin: 20px 20px 0 1px;
}

.container .box .dream{

display: row;

width: auto;
}

.container .box .dream img {
 width: 300px;
 height: auto;
 margin-right: 15px;
 margin-bottom: 15px;
 border-radius: 5px;
 vertical-align: top;
 }

当我尝试使用网格时，它使图像失真。我尝试了 Youtube 上的一些其他教程，这些教程制作了一个不错的动态画廊，但图像失去了原来的尺寸。由于这最终是为了一家摄影店，我真的很想保持原始图像的大小或足够接近。 我找到了使用第 n 个 child() 选择器使它看起来与这个画廊相似的方法，但是每一行都设置了一个大小，并且由于一些图像更高一些更宽所以并不理想。

这是我应该添加/更改到 php 的东西吗？

Answer 1

Masonry 布局目前是 提议添加到 CSS，但在它被支持之前，您必须依靠更原始的方法来实现这种布局。

一种这样的方法是使用绝对定位，使用Javascript根据照片的大小计算每张照片的位置，并相应地定位。有 可用的库 可以为您完成繁重的工作。

如果您不需要图像以任何特定顺序出现，一个非常简单的解决方案是使用 CSS 列。看看这个片段，看看它是如何工作的。如您所见，布局顺序是第 1 列从上到下，然后是第 2 列从上到下，然后是第 3 列从上到下。但是 CSS 会为您平衡列，使它们的长度大致相同。

document.querySelectorAll('.cols>div').forEach(e => {
  /* set a random background color */
  e.style.backgroundColor = 'hsl(' + Math.floor(Math.random()*360).toString() + ',100%,50%)'
  /* set a random height between 2em and 6em */
  e.style.height = Math.floor(2 + Math.random()*4).toString() + 'em'
})

.cols {
  columns: 3;
  color: white;
}

.cols>div {
  border: 1px solid black;
  margin-bottom: 1em;
  padding: 1em;
  border-radius: 4px;
  break-inside: avoid;
}

<div class="cols">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
</div>