HTML 圖片自適應流式排版實現：根據圖片尺寸自動佈局並設置間距

方案一：CSS Multi-column Layout（瀑布流）

.gallery {
    column-count: 4;           /* 列數 */
    column-gap: 10px;          /* 間距 */
    column-fill: balance;      /* 平衡列高 */
}
.gallery img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;       /* 圖片間距 */
    break-inside: avoid;       /* 避免圖片跨列斷裂 */
}

優點：純 CSS，無 JS 依賴，瀏覽器原生支持。缺點：順序為豎向優先，非嚴格瀑布流。

方案二：Flexbox + 虛擬列（現代瀏覽器）

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;                 /* 間距 */
}
.gallery img {
    flex: 0 0 calc(25% - 10px); /* 4列，扣除 gap */
    height: auto;
    object-fit: cover;         /* 裁剪填充 */
}

配合 JS 計算最短列追加元素，可實現真正瀑布流。

方案三：Masonry / Salvattore 等成熟庫

<script src="masonry.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-item"><img src="..."></div>
  ...
</div>
<script>
  new Masonry('.grid', { itemSelector: '.grid-item', columnWidth: 200, gutter: 10 });
</script>

功能最全：動畫、無限滾動、圖片加載後重排、響應式斷點。

推薦選型

• 簡單畫廊、固定列數 → CSS Columns。
• 響應式、動態數據、需動畫 → Masonry。
• 輕量、無依賴、現代瀏覽器 → Flexbox + 少量 JS。