当前位置：首页 > 文章列表 > 文章 > 前端 > CSS 砌体 Catness

CSS 砌体 Catness

来源：dev.to 2024-11-06 10:52:07 0浏览收藏

从现在开始，努力学习吧！本文《CSS 砌体 Catness》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

css 就像技术中的其他东西一样 - 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3，也称为 css masonry 布局。 theo 制作了一段视频，介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。

所有这些让我很高兴尝试 css 砌体！ webkit 照片演示启发我用猫的照片制作类似的视图！谁不爱猫呢？

先决条件

要查看我们要构建的内容，您需要 safari 技术预览版，或者在 firefox 中将功能标志 layout.css.grid-template-masonry-value.enabled 设置为 true。

要访问 firefox 中的功能标志，请在地址栏中输入 about:config。按回车键，您可以搜索网格或上面提到的字符串。将其切换为 true，然后就可以开始了！

基本熟悉 typescript/javascript、react 和 next。

设置一个新项目

在终端中创建一个新的 next 项目。

运行此命令：npx create-next-app@latest

那么您可能需要安装以下软件包：

create-next-app@15.0.1
ok to proceed? (y) y

为您的项目命名。我称我的猫为图片瀑布

继续在终端中设置下一个项目（确保不要使用 tailwind）：

would you like to use typescript?  yes
would you like to use eslint?  yes
would you like to use tailwind css? no
would you like your code inside a 'src/' directory?  no
would you like to use app router? (recommended) yes
would you like to use turbopack for next dev? no
would you like to customize the import alias (@/* by default)? no

当您的项目完成设置后：

通过在终端 cd your-project-name 中运行此命令将目录更改为您的项目。
然后运行此命令代码在 vscode 中打开它。（如果还没有设置此命令）

删除样板

应用程序文件夹内有一个名为 page.tsx 的文件，其中包含样板文件中呈现的所有代码。

删除该代码并暂时保留 div 或片段。这是一个例子：

// app/page.tsx
export default function home() {
  return <div></div>;
}

应用程序文件夹中还有一个页面样式表。它名为 page.module.css，您可以打开它，选择其中的所有样式，然后删除它们。

让我们更改我们的元数据，让我们的应用程序的功能更加清晰。像这样更新layout.tsx：

// app/layout.tsx
import type { metadata } from "next";
import "./globals.css";

export const metadata: metadata = {
  title: "cat pics",
  description: "bringing cats your way with experimental css",
};

export default function rootlayout({
  children,
}: readonly<{
  children: react.reactnode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

如果您也愿意的话，可以添加一个猫的图标（如何在下一步中添加图标）！

创建 .env 文件

在项目根目录创建一个 .env 文件。我们将在此处存储来自 cat api 的 api 密钥。

注册 cat api

从 the cat api 注册免费的 api 密钥。初始注册后，您将收到一封包含 api 密钥的电子邮件。复制该 api 密钥并在 .env 中创建一个新变量。我将我的钥匙称为 cat_key。

您的本地 .env 应如下所示：cat_key=your_api_key。如果您部署此功能，请确保将其添加到部署的任何位置。

把猫的照片拿出来！

我从前面提到的 webkit 演示中收集信息来创建猫图片的页面和样式。在这里，我们调用 api，映射结果，并渲染返回的图片：

// app/page.tsx
import styles from "./page.module.css";
const url = "https://api.thecatapi.com/v1/images/search?limit=50";
const api_key = process.env.cat_key || '';

interface catimage {
  id: string;
  url: string;
}

async function getcatpics() {
  try {
    const res = await fetch(url, {
      headers: {"x-api-key": api_key},
    });
    const result = await res.json();
    return result;
  } catch (error) {
    throw new error(`unable to get the cute cats! ${error}`);
  }
}

export default async function home() {
  const cats = await getcatpics();

  return (
    <main classname={styles.page}>
      {cats.map((cat: catimage, index: number) => (
        <figure classname={styles.card} key={cat.id}>
          <img
            classname={styles.catpic}
            src={cat.url}
            alt={`cat ${index + 1}`}
          />
        </figure>
      ))}
    </main>
  );
}

为照片设计风格

现在我们已经引入了图片，让我们看看 css 砌体的实际效果！从 webkit 的书中取出一页，这里是 page.module.css：

.page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(14rem, 2fr)) minmax(8rem, 1fr);
  grid-template-rows: masonry; 
  gap: 1rem;
}

.card {
  position: relative;
  counter-increment: item-counter;
}

.catPic {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1ch;
}

如果您保存文件并在终端中运行 npm run dev，它应该会给您一个像这样的页面（随机选择图像）：

CSS 砌体 Catness