具有动态尺寸图像的马赛克栅格画廊

引言

在现代的 Web 应用程序中，图片通常是不可或缺的组成部分。然而，如果您需要显示许多具有不同尺寸的图片，传统的栅格布局可能会导致布局混乱和视觉效果不佳。

为了解决这个问题，我们可以使用马赛克布局。马赛克布局通过动态调整每个图片块的大小来适应其内容，从而创建一个更美观、更易于浏览的图片展示区域。

本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个具有动态尺寸图像的马赛克栅格画廊，并提供示例代码和实用建议。

步骤一：HTML 结构

首先，我们需要创建用于容纳图片的 HTML 结构。对于此示例，我们将使用以下基本结构：

---- --------------------
  ---- --------------------
    ---- ----------------- ---------- ---
  ------
  ---- --------------------
    ---- ----------------- ---------- ---
  ------
  ---- --- ---- ------ ----- -- ------ ---
------

我们使用 mosaic-grid 类来包装所有 mosaic-item，每个 mosaic-item 内部有一张图片。

步骤二：CSS 样式

接下来，我们需要为我们的马赛克布局创建 CSS 样式。我们将使用 CSS 网格布局和 flexbox 来实现这一点，具体如下：

------------ -
  -------- -----
  ---------------------- ---------------- ------------- ------
  ---- -----
-

------------ -
  --------- -------
  -------- -----
  ---------------- -------
  ------------ -------
-

------------ --- -
  ---------- -----
  ------- -----
  ----------- ------
-

我们首先将 mosaic-grid 设置为网格布局，并使用 repeat(auto-fit, minmax(200px, 1fr)) 实现自适应列数。然后，我们将 gap 属性设置为 20 像素以创建图像之间的间距。

对于 mosaic-item，我们将其设置为 flexbox 布局，并使其元素内部居中对齐。最后，我们将 img 元素的宽度设置为最大宽度，并使用 object-fit: cover 来确保图像可以填充父容器。

步骤三：JavaScript 动态调整图像尺寸

现在，我们需要使用 JavaScript 动态调整每个图像的大小以适应其内容。为此，我们将使用 getBoundingClientRect() 函数来获取每个图像的实际宽度和高度。

----- ------ - --------------------------------------- ------

-------- -------------- -
  ---------------------- -- -
    ----- ---- - ------------------------------
    ----- ----- - ---------- - ------------
    ------------------ - ------------- - ----------
  ---
-

--------------------------------- --------------

---------------

我们首先选择所有 .mosaic-item img 元素，并定义一个名为 resizeImages 的函数来计算每个图像的新高度。我们从元素的 getBoundingClientRect() 方法获取其实际宽度和高度，然后使用该值来计算其新高度。

最后，我们通过添加一个事件监听器来确保在窗口大小更改时重新调整图像大小，并在页面加载时立即调用 `resizeImages

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/11856