使用CSS重新創建Google Images搜索佈局

鑰匙要點

• >重新創建Google的圖像搜索佈局涉及為圖像創建基本的HTML結構，使用CSS造型以及使用JavaScript添加功能。
此過程中使用的密鑰CSS屬性包括顯示，網格 - 板塊列，網格差距和對象擬合。這些屬性有助於創建網格佈局，指定列的數量和大小，設置網格單元之間的間隙，並決定如何調整圖像以安裝其容器。
• 可以定制佈局以滿足個人需求。這包括更改網格中的列的數量和大小，網格單元之間的間隙以及圖像的大小。還可以添加其他CSS屬性以進行進一步的自定義。
> 可以使用JavaScript添加到圖像中的功能。其中的示例包括將事件偵聽器添加到單擊時打開較大版本的圖像中，並添加諸如圖像過濾或排序之類的功能。
可以通過使用CSS中的媒體查詢來響應佈局。這些允許根據用戶屏幕的大小應用不同的樣式，以確保在所有設備上正確顯示圖像。
• >
• >在我最近參與的一個項目中，我被要求重新創建Google的圖像搜索擴展功能，類似於下面顯示的屏幕截圖，但以剛性網格格式。

>我的直接反應是，我需要使用JavaScript來設置一些佈局和框模型屬性，我總是不願意做的，並且只能作為最後的手段做。由於有一個已經有效的例子，我決定打開開發人員工具以查看Google的方式（為什麼要重新發明輪子，對呢？）

） 事實證明，Google將結構分為兩個Divs，一個DIV包含所有圖像單元，而另一個DIV則用於擴展區域。單擊圖像（並擴展）後，JavaScript插入了單擊Div行中的最後一個圖像單元格之後的隔離器div。 JavaScript將其高度設置為與擴展的Div相同，並將擴展的Div完全定位為Spacer Div所佔據的位置。這很聰明，但由於對JavaScript的嚴重依賴而不是理想的。 >

>我有一個基本想法，我設法使用CSS開發了用於所有佈局和框模型屬性的工作演示。唯一需要的JavaScript是根據擴展切換更改類名。

基本標記

首先，我們需要與每個.image__cell一起構造.Image-Grid容器。這是html：

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

上面的標記包含一個示例。圖像細胞元素，需要為網格中的每個圖像重複。請注意＃Close-Jump-1和＃Expand-Jump-1的標識符，隨後的HREF屬性將需要是.image__cell唯一的。哈希鏈接，例如：href =“＃Expand-jump-1”使瀏覽器在按下時可以跳到活動的圖像單元格。

>

> CSS

首先，我們應用盒子尺寸：Border-Box;對於所有元素，包括：之前和：使用通用選擇器後的偽元素之後。這將允許輕鬆處理將百分比寬度與固定填充值混合在一起的元素，因為它結合了它們。

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

.Image-Grid元素被給出一個clearfix溢出：隱藏；基於圖像單元格的浮標來維護佈局。

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

給出的圖像單元的寬度等於100除以每行的數量，表示為百分比。在此示例中，每排有5個項目，這意味著每個.image__cell寬度為20％。

請注意：填充：10px 5px 0;應用於.Image-Grid與填充結合：0 5px;圖像- 基礎和高度：10px; on .image__cell.is-collapsed .arrow- up在瓷磚圖像周圍給出相等的窗框效果。我們可以通過更改這些值來增加圖像之間的差距。

最後，給出了.basic__img映像元素顯示：block;防止任何間距問題。 themax寬度：100％；和身高：自動；聲明使圖像能夠擴展到其容器的寬度，而不超過其自身的寬度。 以下CSS為可擴展區域提供了佈局。

以下是從上述代碼中取出的一些註釋：

光標在懸停在盤旋上時變為指針。這給用戶提供了一個視覺指示器，即單擊圖像將做點什麼。 > .image-expand元素的最大高度設置為以其初始狀態設置為0。當.Image-Cell元素具有.IS擴展類時，最大高度的值為500px。請注意，如果擴展區域增加，則需要增加最大高度值，以使整個區域顯示。 在切換擴展區域時，應用於最大高度和邊緣底的過渡允許滑動效果。

<span><span>.image__cell.is-collapsed .image--basic</span> {
</span>  <span>cursor: pointer;
</span><span>}
</span>
<span><span>.image__cell.is-expanded .image--expand</span> {
</span>  <span>max-height: 500px;
</span>  <span>margin-bottom: 10px;
</span><span>}
</span>
<span><span>.image--expand</span> {
</span>  <span>position: relative;
</span>  <span>left: -5px;
</span>  <span>padding: 0 5px;
</span>  <span>box-sizing: content-box;
</span>  <span>overflow: hidden;
</span>  <span>background: #222;
</span>  <span>max-height: 0;
</span>  <span>transition: max-height .3s ease-in-out,
</span>              margin-bottom <span>.1s .2s;
</span>  <span>width: 500%;
</span><span>}</span>

從視覺上講，

>

，我們希望擴展區域與.Image-Grid對齊。為此，我們需要否定.image-Grid元素中設置的水平填充。

1. 首先，.image-Expand給出盒子尺寸：content-box;要從其寬度中排除填充值。
.Image-expand元素的寬度為500％。這使擴展的區域可以佔據.Image-Grid的整個寬度，減去填充。
2. 佔據剩餘空間，左右給出了5px填充。
>
3. 位置：相對；左：-5PX聲明將擴展的區域移到左側，以否定了.image-Grid padding-left值。

聰明的位

>我們想將所有圖像 - expent元素轉移到最左邊的元素，以與.Image-Grid的左側對齊。為此，我們根據其在行中的位置設置負餘量。

>

這是nthtype的地方：

>

>最初，我使用nth-child實現了相同的效果，但是在其他項目上，我發現ios8 Safari對此很易於故障，因此我嘗試避免使用它。取而代之的是，我使用ntype，因為它在很大程度上具有相同的目的。如果您有興趣，可以在此處找到對ntype的簡短說明 在上述CSS中，我們針對每行的第二，第三和第四。左側值也取決於該元素在行中的位置。請注意，每行的第一個元素不需要左側值集，因為它已經處於所需位置。元素距離左側越遠，我們需要將可擴展區域推回左側（以-100％為增量）。如果不執行此操作，可擴展區域將與其父母保持一致，如下所示：

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

>

>我們還需要插入下面顯示的CSS，以確保每行的第一個.image__ cell（除第一行）時，在較早的.image__cell元素被擴展時會堅持其位置。

>

>現在，基本佈局已經到位，我們可以添加一些樣式來改善用戶體驗。

首先，向上點箭頭指示展開的塊屬於哪個圖像：>

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

請注意，箭頭樣式是通過創建CSS三角形來實現的，從而保存HTTP請求。通過巧妙地使用邊界並將高度和寬度設置為0，很容易實現此效果。

>我們還希望僅在擴展.image__cell元素時出現箭頭。這是通過添加.IS擴展類來完成的。最後，我們希望箭頭保留在.image__cell元素的水平中心中，所以餘量：0自動；應用。

>現在，我們準備好樣式的“關閉”按鈕，該按鈕將允許用戶關閉擴展的區域。

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

>請注意，通過使用A：偽元素之前，我們能夠在頁面上插入一個“×”字符，而不會出現在DOM中，再次保存至少一個HTTP請求。插入的特殊字符是Boostrap也使用的乘法字符。

jQuery

>最後，下面的jQuery簡單地在每個圖像單元格和關閉按鈕的單擊時在.is擴展和.is collaps的類之間切換。

當然，您可以通過使用'classList（）和其他本機技術可以輕鬆地避免使用jQuery，但是除非您願意多填充，否則您不會得到深度瀏覽器的支持。

使網格響應

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

>在較小設備上的每行上有5個圖像單元格是不理想的，因此我們能夠使用媒體查詢更改每行的數量。例如，以下CSS將其減少為每排2張圖像。

>

為了防止較早應用的CSS與每行5個項目有關，我們將需要重置這些值或提取屬性並將其放置在其自己的媒體查詢中，該查詢是在下面的Codepen中完成的，以及先前的代碼。

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

>請參閱codepen上的sitepoint（@sitepoint）在CSS中的Pen Google Images搜索。

請注意，包含單元的功能，該功能吐出了50個圖像單元，以節省我的困擾。

對於Sass Lovers

>我不想排除在撰寫本文時不使用Sass的讀者，但我也不想打折。該項目將自己作為開發中的Sass的絕佳用例，因為每行的數量與許多不同的屬性有關。

請參閱以下替代Codepen演示。請注意，在該演示中，我正在使用CSS頂部的SASS變量，這使我可以指定圖像，最大圖像寬度以及每行的最小圖像和最大圖像之間的差距。使用各種計算，SASS將根據提供的選項將其編譯為CSS。它將根據每行的最大項目數自動計算最佳媒體查詢，這將使圖像保持在其最大維度之內。

此SASS版本是實驗性的，但是請讓我知道，如果您注意到常規版本或SASS版本中的任何錯誤或潛在的代碼改進。

>

經常詢問的問題（常見問題解答）有關使用CSS

重新創建Google Images搜索佈局

>如何使用CSS？

>使用CSS重新創建Google Images搜索佈局的Google Images搜索佈局涉及幾個步驟。首先，您需要為圖像創建基本的HTML結構。這包括為每個圖像創建一個DIV並為其分配一個類。接下來，您需要使用CSS對這些Div進行樣式，以模仿Google Images的佈局。這涉及設置DIV的寬度和高度及其在頁面上的位置。您還可以使用CSS向圖像添加懸停效果。最後，您可以使用JavaScript將功能添加到圖像中，例如單擊圖像時打開較大版本的圖像。

>

>用於重新創建Google Images佈局的鍵CSS屬性是什麼？

>用於重新創建Google Images佈局的密鑰CSS屬性包括顯示，網格 - 板塊柱，網格差距和對象擬合。顯示屬性設置為網格以創建網格佈局。網格 - 板柱屬性用於指定網格中列的數量和大小。網格間隙特性用於設置網格單元之間的間隙。對象擬合屬性用於指定應如何調整圖像以適合其容器。

>

>我可以自定義佈局以滿足我自己的需求嗎？滿足您自己的需求。您可以更改網格中的列的數量和大小，網格單元之間的間隙和圖像的大小。您還可以添加其他CSS屬性來進一步自定義佈局，例如向圖像添加邊框或陰影。

>

>如何將功能添加到圖像？

>您可以在使用JavaScript的圖像。例如，您可以將事件偵聽器添加到單擊圖像時打開較大版本的圖像。您還可以添加功能，例如過濾或對圖像進行排序。

>為什麼我的佈局看起來不像Google Images Leatout？

​​

如果您的佈局看起來不像Google Images的佈局，則可以在是幾個原因。首先，確保您正確實現了CSS屬性。其次，檢查您的圖像是否具有相同的縱橫比。 Google圖像使用相同縱橫比的圖像創建統一的佈局。如果您的圖像具有不同的縱橫比，則佈局可能看起來不會相同。

>

>如何使我的佈局響應？

>

>您可以通過在CSS中使用媒體查詢來使佈局響應能力。媒體查詢允許您根據用戶屏幕的大小應用不同的樣式。例如，您可以更改較小屏幕上網格中的列數，以確保圖像仍然正確顯示。

>我可以將此佈局用於其他類型的內容，而不僅僅是圖像？您可以使用它顯示文本，視頻或任何其他類型的內容。只需確保相應地調整CSS屬性以適合您顯示的內容的類型即可。

>

>如何在圖像中添加懸停效果？ ：CSS中的懸停偽級。例如，當用戶徘徊在其上時，您可以更改圖像的邊框顏色，也可以顯示有關圖像的其他信息。

>

為什麼我的圖像不正確地擬合在網格單元格中？

如果您的圖像在網格單元中不正確擬合，則可能是因為圖像的縱橫比與網格單元的縱橫比不同。您可以通過使用CSS中的對象擬合屬性來修復此操作，以指定應如何調整圖像以適合其容器。

>

>我可以使用WordPress（例如WordPress）的CMS使用此佈局？是的，您可以將此佈局與WordPress這樣的CMS使用。您需要將CSS添加到主題的樣式。 CSS文件和HTML中，將CSS添加到適當的模板文件中。您可能還需要添加一些PHP代碼以動態生成圖像的HTML，具體取決於如何設置WordPress網站。

以上是使用CSS重新創建Google Images搜索佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！