使用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中文网其他相关文章！