HTML如何制作瀑布流布局？图片自动排列怎么实现？

column-count

<div class="waterfall-container">
  <div class="waterfall-item">
    @@##@@
    <p>图片描述文字，可能短一点。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  </div>
  <div class="waterfall-item">
    @@##@@
    <p>另一段描述，可能长一点，为了测试不同高度的效果，我们可以把这段文字写得更长一些，看看它在瀑布流中的表现如何，这对于理解布局非常重要。</p>
  </div>
  <div class="waterfall-item">
    @@##@@
    <p>第三张图片的简短描述。</p>
  </div>
  <div class="waterfall-item">
    @@##@@
    <p>第四张图片的描述，中等长度。</p>
  </div>
  <div class="waterfall-item">
    @@##@@
    <p>第五张图片的描述，内容比较多，会撑高这个盒子，所以它的高度会明显高于其他一些短描述的图片项，这也是瀑布流需要处理的关键问题。</p>
  </div>
  <div class="waterfall-item">
    @@##@@
    <p>第六张图片。</p>
  </div>
  <!-- 更多图片项 -->
</div>

.waterfall-container {
  column-count: 3; /* 分成3列 */
  column-gap: 20px; /* 列间距 */
  width: 90%; /* 容器宽度，可根据需要调整 */
  margin: 0 auto; /* 居中显示 */
}

.waterfall-item {
  display: inline-block; /* 确保每个项独立占据空间 */
  width: 100%; /* 让项在列内填满 */
  margin-bottom: 20px; /* 项之间的垂直间距 */
  box-sizing: border-box; /* 避免边框和内边距导致宽度溢出 */
  /* break-inside: avoid-column; /* 尝试避免项在列内被截断，但浏览器支持不一 */
}

.waterfall-item img {
  max-width: 100%;
  height: auto;
  display: block; /* 避免图片下方出现空白 */
}

break-inside: avoid-column

top

left

<div class="grid">
  <div class="grid-item">
    @@##@@
    <p>短描述</p>
  </div>
  <div class="grid-item">
    @@##@@
    <p>这是一段比较长的描述文字，为了模拟不同高度的卡片，我们会让这段文字内容足够多，从而使得这个卡片的高度明显高于其他卡片。</p>
  </div>
  <div class="grid-item">
    @@##@@
    <p>中等描述</p>
  </div>
  <!-- 更多项目 -->
</div>

/* 为Masonry提供基础样式 */
.grid {
  margin: 0 auto;
}

.grid-item {
  width: 23%; /* 假设每列宽度 */
  margin-bottom: 20px;
  float: left; /* Masonry会根据这个来定位 */
  box-sizing: border-box;
}

.grid-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

// 假设你已经引入了Masonry库（例如通过CDN或npm）
// <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

document.addEventListener('DOMContentLoaded', function() {