瀑布流的几种实现方式

原创

已于 2025-01-10 17:19:51 修改 · 2.8k 阅读

于 2025-01-10 17:19:24 首次发布

一、应用场景

当我再刷小X书的时候，出了会神，然后看到瀑布流布局的图片排版，就想想怎么实现这种效果，因为以前还没有实现过。

瀑布流布局是一种常见的网页布局方式，特别适用于图片展示：如摄影作品集、电商网站的商品展示页面、社交媒体平台Instagram等，能够有效地展示大量图片，且视觉效果美观。
实现方式也有多种，我这里实现两种方式，纯 CSS 实现和使用 JavaScript +CSS 实现。当然也可以使用库来实现如 Masonry.js 。
下面详细介绍两种方式的实现与区别。

首先准备资料，你需要有若干照片，我这里随便找了32张，宽度高度不同的图片，然后建立一个HTML

二、纯CSS实现

特点：按照屏幕宽度，划分列，再从上到下，展示图片。由于是手动设置列数，若小屏下，需要通过媒体查询来修改列数。

实现方式：借助column-count属性来创建 4 列的布局，并使用 column-gap 设置列间距。每个 .img-container 使用 break-inside: avoid 来防止图片被分割。

看下展示效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
    <span>啊！瀑布！column-count的实现</span>
    <div id="box-container" class="box-container">
      <!-- <div class="img-container">
        <img src="https://blog.csdn.net/assets/images/test/test%20(1).jpg" alt="">
      </div> -->
    </div>
  </div>
</body>
<script>
  const boxContainer = document.getElementById('box-container');
  const imgCount = 32;
  for (let i = 1; i <= imgCount; i++) {
    const imgContainer = document.createElement('div');
    imgContainer.className = 'img-container';
    const img = document.createElement('img');
    img.src = `../../assets/images/test/test (${i}).jpg`;
    img.alt = `Image ${i}`;
    imgContainer.appendChild(img);
    boxContainer.appendChild(imgContainer);
  }

  
</script>
<style>
  body {
    margi

标签