使用 HTML 和 CSS 創建回應式貓貓圖片庫

🌊 作者主頁：海擁
🌊 作者簡介：🏆CSDN全堆疊領域優質創作者、🥇HDZ核心組成員、🥈蟬聯C站周榜前十
🌊 粉絲福利：粉絲群 每周送四本書，每月送各種小禮品(搪瓷杯、抱枕、滑鼠墊、馬克杯等)

直接跳到末尾 去評論區領書

在本文中，我將向大家展示如何使用 HTML 和CSS 代碼創建 回應式貓貓圖片庫，之前我也做了一個使用 HTML、CSS 和 JS 創建回應式可過濾的游戲+工具展示頁面，

我們會在一些圖片壁紙類網站上看到這樣的圖片庫，許多型別的影像整齊地排列在一起，這種型別的設計最常用于個人網站或圖片下載網站，如果你想知道什么是回應式貓貓圖片庫，讓我來告訴你，

回應式是網頁設計中一個非常流行的詞，作為回應式設計，任何螢屏尺寸的用戶都可以使用，這意味著在任何設備的情況下，此設計都可以根據該設備的螢屏大小進行自我調整，

下面我提供了一個現場演示，可以幫助大家了解此圖片庫的作業原理，

http://haiyong.site/maomaotupianku

希望上面的演示已經幫助你弄清楚它是如何作業的，這個設計最重要的一點是你可以在這里使用不同大小的影像，

正如你在上面看到的，這個回應式貓貓圖片庫有多種尺寸的圖片，有些影像尺寸很大，有些影像很小，有些影像很長，換句話說，這里的影像大小是隨機的，它是完全回應，每當你在小型設備上使用滑塊時，都可以在列中看到影像，

如何使用 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;
    }
}

到這里就已經大功告成了，怎么樣，是不是很簡單

🥇 評論區抽粉絲送書啦

💌 歡迎大家在評論區提出意見和建議! (抽兩位幸運兒送書，實物圖如下)💌

《Vue.js全家桶零基礎入門到進階專案實戰》

【內容簡介】

Vue.js 是一套構建用戶界面的漸進式框架，本書旨在幫助讀者全面掌握 Vue.js 全家桶技術和單頁面前后端分離專案開發，理解 MVVM 框架思想，讓前端和后端開發人員快速精通 Vue.js 全家桶技術，
　　本書貫穿入門準備實操、基礎核心案例、中級進階實戰、綜合進階專案進行講解，循序漸進、環環相扣，通俗易懂，并分析為什么這樣使用，讓你知其所以然，包含的主要技術：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、攔截器、組件通信、跨域問題、上線部署等，
　　本書適合有 HTML、CSS、JavaScript 基礎的 Vue.js 零基礎小白、前端開發人員、后端開發人員，同時，也適合以下人員閱讀：在校生，需要掌握流行的新技術，做到與職場同步；在職人員，作業中需要學習使用Vue；有基礎學員，需要系統、全面、高效使用 Vue 技術，

也有不想靠抽，想自己買的同學可以參考下面的鏈接

京東自營購買鏈接：

《Vue.js全家桶零基礎入門到進階專案實戰》- 京東圖書

當當自營購買鏈接：

《Vue.js全家桶零基礎入門到進階專案實戰》- 當當圖書

📣 注意：

大家點贊關注，三天后也就是 11月8日 從評論區留言的同學中抽取兩位送書

🌊 面試題庫：Java、Python、前端核心知識點大全和面試真題資料
🌊 電子圖書：圖靈程式叢書 300本、機械工業出版社6000冊免費正版圖書
🌊 辦公用品：精品PPT模板幾千套，簡歷模板一千多套
🌊 學習資料：2300套PHP建站原始碼，微信小程式入門資料

如果中獎了聯系不上則視為放棄，可以從下方公眾號里找到作者的聯系方式，每周都會送四本書，后面送書力度還會加大，一年送幾百上千本不是問題，回復【進群】領書不迷路，群內 每位成員 我都會送一本，回復【資源】可獲取上面的資料👇🏻👇🏻👇🏻