请教一下如下图的这种照片区域是怎么完成的啊！

每次刷新每行的照片数量和大小都会不一样，但一行的宽度加起来总是一定的

这种照片区域通常称为瀑布流布局（Waterfall Flow Layout）或瀑布流式布局。它可以使用CSS和JavaScript实现。

一般的实现方式是，先将图片按照比例缩放到一定范围，然后根据容器的宽度计算出每列可以容纳的图片数量。接着，根据图片的高度动态调整每个图片所在列的高度，以达到瀑布流的效果。

这个实现可以使用CSS中的columns属性来实现自动分列，以及object-fit属性来保持图片的比例，然后使用JavaScript来计算图片的高度和所在列的位置。也可以使用第三方库如Masonry、Isotope等来实现。

下面是一个简单的示例代码，展示了如何使用CSS和JavaScript实现瀑布流布局：

<div class="container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <img src="image4.jpg">
  <img src="image5.jpg">
  ...
</div>

<style>
.container {
  columns: 3; /* 设置为3列 */
  column-gap: 10px; /* 列间距 */
}
img {
  width: 100%; /* 保持图片宽度占满整个列 */
  height: auto; /* 保持图片比例 */
  object-fit: cover; /* 按比例缩放图片 */
}
</style>

<script>
const container = document.querySelector('.container');
const images = Array.from(container.querySelectorAll('img'));

let colHeight = [0, 0, 0]; // 每列的高度，初始值为0

images.forEach(img => {
  const minCol = colHeight.indexOf(Math.min(...colHeight)); // 找到最短列的位置
  img.style.gridColumn = minCol + 1; // 设置图片所在列
  colHeight[minCol] += img.offsetHeight + 10; // 更新最短列的高度
});
</script>

其中column-gap表示列间距，可以根据需要自行调整。JavaScript部分使用offsetHeight获取图片的高度，然后根据最短列的位置来设置图片所在列，并更新该列的高度。

如果有帮助到您 望采纳

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7620247

这种布局是瀑布流，自我感觉用vue来完成比较方便一点