一起用代码吸猫！本文正在参与【喵星人征文活动】
🌊 作者主页：海拥
🌊 作者简介：🥇HDZ核心组成员、🏆全栈领域优质创作者、🥈蝉联C站周榜前十
🌊 粉丝福利：进粉丝群每周送四本书（每位都有），每月抽送各种小礼品(掘金搪瓷杯、抱枕、鼠标垫、马克杯等)
在本文中，我将向大家展示如何使用 HTML 和CSS 代码创建 响应式猫猫图片库。之前我也做了一个使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面。
我们会在一些图片壁纸类网站上看到这样的图片库。许多类型的图像整齐地排列在一起。这种类型的设计最常用于个人网站或图片下载网站。如果你想知道什么是响应式猫猫图片库，让我来告诉你。
响应式是网页设计中一个非常流行的词。作为响应式设计，任何屏幕尺寸的用户都可以使用。这意味着在任何设备的情况下，此设计都可以根据该设备的屏幕大小进行自我调整。
下面我提供了一个现场演示，可以帮助大家了解此图片库的工作原理。
希望上面的演示已经帮助你弄清楚它是如何工作的。这个设计最重要的一点是你可以在这里使用不同大小的图像。
正如你在上面看到的，这个响应式猫猫图片库有多种尺寸的图片。有些图像尺寸很大，有些图像很小，有些图像很长。换句话说，这里的图像大小是随机的。它是完全响应。每当你在小型设备上使用滑块时，都可以在列中看到图像。
如何使用 HTML 和 CSS 创建响应式图片库
现在是我开始创建响应式猫猫图片库。首先，你需要创建一个 HTML 和 CSS 文件。在你的设备上打开编辑器以创建 HTML 文件。下面我给出了 HTML 和 CSS 代码，你可以复制粘贴使用它们。
步骤 1：使用以下 HTML 代码添加图像
我从 pinterest 上找了一些猫猫图片，下面是图片库的基本HTML结构
<div id="gallery" class="container-fluid">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-1.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-2.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-3.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-4.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-5.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-6.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-7.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-8.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-9.jpg" class="img-responsive">
<img src="http://haiyong.site/wp-content/uploads/2021/11/maomao-10.jpg" class="img-responsive">
<!-- 此处省略一亿张猫猫图片 -->
</div>
部分图片如下
第 2 步：使用 CSS 代码设计图库
我使用了下面的 CSS 代码设计了它。在这种情况下，不需要使用过多的 CSS 代码。我只使用 CSS 代码对图像进行排序并进行一些基本设计。column-count:6;将图像分成最多6列。
我也放了一个 20px的距离在每一列的中间。结果，图像看起来有点空白。你可以复制 css 代码，然后将其粘贴到你的 css 文件中。或者使用 style 标签将这些代码添加到 HTML 文件中。
#gallery{
column-count:6;
column-gap:20px;
}
#gallery img {
width:100%;
height:auto;
margin: 4% auto;
box-shadow:-3px 5px 15px #000;
cursor: pointer;
transition: all 0.2s;
}
第 3 步：使图像滑块具有响应性
我用了以下代码使它具有完全响应。因为我是通过 CSS 做出响应的，所以我使用了@media 确定如何查看不同皮肤的这些图像。如果你要使用Bootstrap构建此滑块，则无需使用单独的 CSS 代码使其响应。你可以复制这些代码，然后将它们添加到你的 CSS 文件中。
@media (max-width:1200px){
#gallery{
column-count:4;
column-gap:20px;
}
}
@media (max-width:800px){
#gallery{
column-count:3;
column-gap:20px;
}
}
@media (max-width:600px){
#gallery{
column-count:2;
}
}
到这里就已经大功告成了，怎么样，是不是很简单
写在最后的
作者立志打造一个拥有100个小游戏的摸鱼网站，更新进度：40/100
我已经写了很长一段时间的技术博客，并且主要通过掘金发表，这是我的一篇使用 HTML 和 CSS 创建响应式猫猫图片库。我喜欢通过文章分享技术与快乐。你可以访问我的博客： juejin.cn/user/204034… 以了解更多信息。希望你们会喜欢！😊
💌 欢迎大家在评论区提出意见和建议！💌
