使用CSS重新创建Google Images搜索布局-IT业界-PHP中文网

首页

科技周边

IT业界

使用CSS重新创建Google Images搜索布局

Joseph Gordon-Levitt

Feb 20, 2025 pm 12:27 PM

使用CSS重新创建Google Images搜索布局

钥匙要点

>重新创建Google的图像搜索布局涉及为图像创建基本的HTML结构，使用CSS造型以及使用JavaScript添加功能。
可以定制布局以满足个人需求。这包括更改网格中的列的数量和大小，网格单元之间的间隙以及图像的大小。还可以添加其他CSS属性以进行进一步的自定义。
>
>在我最近参与的一个项目中，我被要求重新创建Google的图像搜索扩展功能，类似于下面显示的屏幕截图，但以刚性网格格式。

>我的直接反应是，我需要使用JavaScript来设置一些布局和框模型属性，我总是不愿意做的，并且只能作为最后的手段做。由于有一个已经有效的例子，我决定打开开发人员工具以查看Google的方式（为什么要重新发明轮子，对呢？）

）事实证明，Google将结构分为两个Divs，一个DIV包含所有图像单元，而另一个DIV则用于扩展区域。单击图像（并扩展）后，JavaScript插入了单击Div行中的最后一个图像单元格之后的隔离器div。 JavaScript将其高度设置为与扩展的Div相同，并将扩展的Div完全定位为Spacer Div所占据的位置。这很聪明，但由于对JavaScript的严重依赖而不是理想的。使用CSS重新创建Google Images搜索布局 >

>我有一个基本想法，我设法使用CSS开发了用于所有布局和框模型属性的工作演示。唯一需要的JavaScript是根据扩展切换更改类名。

基本标记

首先，我们需要与每个.image__cell一起构造.Image-Grid容器。这是html：

<span><span><span><section> class<span>="image-grid"</span>></section></span>
</span>  <span><span><span><div> class<span>="image__cell is-collapsed"</span>>
    <span><span><span><div> class<span>="image--basic"</span>>
      <span><span><span><a> href<span>="#expand-jump-1"</span>></a></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="使用CSS重新创建Google Images搜索布局" > 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></span>></span>
</span>      <span><span><span><div> class<span>="arrow--up"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="image--expand"</span>>
      <span><span><span><a> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></a></span><span><span></span>></span>
</span>      <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="使用CSS重新创建Google Images搜索布局" > 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></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
<span><span><span></span>></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元素中设置的水平填充。

首先，.image-Expand给出盒子尺寸：content-box;要从其宽度中排除填充值。
占据剩余空间，左右给出了5px填充。
位置：相对；左：-5PX声明将扩展的区域移到左侧，以否定了.image-Grid padding-left值。

聪明的位

>我们想将所有图像 - expent元素转移到最左边的元素，以与.Image-Grid的左侧对齐。为此，我们根据其在行中的位置设置负余量。

这是nthtype的地方：

>最初，我使用nth-child实现了相同的效果，但是在其他项目上，我发现ios8 Safari对此很易于故障，因此我尝试避免使用它。取而代之的是，我使用ntype，因为它在很大程度上具有相同的目的。如果您有兴趣，可以在此处找到对ntype的简短说明在上述CSS中，我们针对每行的第二，第三和第四。左侧值也取决于该元素在行中的位置。请注意，每行的第一个元素不需要左侧值集，因为它已经处于所需位置。元素距离左侧越远，我们需要将可扩展区域推回左侧（以-100％为增量）。如果不执行此操作，可扩展区域将与其父母保持一致，如下所示：

<span><span><span><section> class<span>="image-grid"</span>></section></span>
</span>  <span><span><span><div> class<span>="image__cell is-collapsed"</span>>
    <span><span><span><div> class<span>="image--basic"</span>>
      <span><span><span><a> href<span>="#expand-jump-1"</span>></a></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="使用CSS重新创建Google Images搜索布局" > 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></span>></span>
</span>      <span><span><span><div> class<span>="arrow--up"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="image--expand"</span>>
      <span><span><span><a> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></a></span><span><span></span>></span>
</span>      <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002563740184.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="使用CSS重新创建Google Images搜索布局" > 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></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
<span><span><span></span>></span></span></span>

>我们还需要插入下面显示的CSS，以确保每行的第一个.image__ cell（除第一行）时，在较早的.image__cell元素被扩展时会坚持其位置。

> 使用CSS重新创建Google Images搜索布局

>现在，基本布局已经到位，我们可以添加一些样式来改善用户体验。

首先，向上点箭头指示展开的块属于哪个图像：>

<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> class<span>="image-grid"</span>></section></span>
</span>  <span><span><span><div> class<span>="image__cell is-collapsed"</span>>
    <span><span><span><div> class<span>="image--basic"</span>>
      <span><span><span><a> href<span>="#expand-jump-1"</span>></a></span>
</span>        <span><span><span><img  alt="使用CSS重新创建Google Images搜索布局" > 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></span>></span>
</span>      <span><span><span><div> class<span>="arrow--up"</span>><span><span></span></span>
</div></span>></span>
</span>    <span><span><span></span></span></span></span></span>
</div></span>></span>
</span>    <span><span><span><div> class<span>="image--expand"</span>>
      <span><span><span><a> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></a></span><span><span></span>></span>
</span>      <span><span><span><img  alt="使用CSS重新创建Google Images搜索布局" > 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></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
<span><span><span></span>></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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

安卓首家接入DeepSeek背后：看见女性力量Mar 12, 2025 pm 12:27 PM

中国女性科技力量在AI领域的崛起：荣耀与DeepSeek合作背后的女性故事女性在科技领域的贡献日益显着。中国科技部数据显示，女性科技工作者数量庞大，在AI算法开发中展现出独特的社会价值敏感性。本文将聚焦荣耀手机，探究其率先接入DeepSeek大模型背后的女性团队力量，展现她们如何推动科技进步，重塑科技发展价值坐标系。 2024年2月8日，荣耀正式上线DeepSeek-R1满血版大模型，成为安卓阵营首家接入DeepSeek的厂商，引发用户热烈反响。这一成功背后，女性团队成员在产品决策、技术攻坚和用户

DeepSeek'惊人”盈利：理论利润率高达545%！Mar 12, 2025 pm 12:21 PM

DeepSeek公司在知乎发布技术文章，详细介绍了其DeepSeek-V3/R1推理系统，并首次公开关键财务数据，引发业界关注。文章显示，该系统单日成本利润率高达545%，创下全球AI大模型盈利新高。DeepSeek的低成本策略使其在市场竞争中占据优势。其模型训练成本仅为同类产品的1%-5%，V3模型训练成本仅为557.6万美元，远低于竞争对手。同时，R1的API定价仅为OpenAIo3-mini的1/7至1/2。这些数据证明了DeepSeek技术路线的商业可行性，也为AI大模型的高效盈利树立了

美的推出首款DeepSeek空调：AI语音交互可实现40万条指令！Mar 12, 2025 pm 12:18 PM

美的即将发布搭载DeepSeek大模型的首款空调——美的鲜净感空气机T6，发布会定于3月1日下午1点30分举行。这款空调配备先进的空气智驾系统，可根据环境智能调节温度、湿度和风速等参数。更重要的是，它集成了DeepSeek大模型，支持超过40万条AI语音指令。美的此举引发业界热议，尤其关注白电产品与大模型结合的意义。不同于传统空调简单的温度设定，美的鲜净感空气机T6能够理解更复杂、更模糊的指令，并根据家庭环境智能调节湿度等，显着提升用户体验。

2025年最佳10个最佳免费反向链接检查器工具Mar 21, 2025 am 08:28 AM

网站建设只是第一步：SEO与反向链接的重要性建立网站只是将其转化为宝贵营销资产的第一步。您需要进行SEO优化，以提高网站在搜索引擎中的可见度，吸引潜在客户。反向链接是提升网站排名的关键，它向谷歌和其他搜索引擎表明您的网站权威性和可信度。并非所有反向链接都有利：识别并避免有害链接并非所有反向链接都有益。有害链接会损害您的排名。优秀的免费反向链接检查工具可以监控链接到您网站的来源，并提醒您注意有害链接。此外，您还可以分析竞争对手的链接策略，从中学习借鉴。免费反向链接检查工具：您的SEO情报员

百度又一国民产品接入DeepSeek，是想开了还是跟风？Mar 12, 2025 pm 01:48 PM

DeepSeek-R1赋能百度文库与网盘：深度思考与行动的完美融合短短一个月内，DeepSeek-R1已迅速融入众多平台。百度凭借大胆的战略布局，将DeepSeek作为第三方模型伙伴，整合进自身生态系统，这标志着其“大模型搜索”生态战略的重大进展。百度搜索和文心智能体平台率先接入DeepSeek及文心大模型的深度搜索功能，为用户提供免费的AI搜索体验。同时，“百度一下，你就知道”的经典slogan回归，新版百度APP也整合了文心大模型和DeepSeek的能力，推出“AI搜索”、“全网信息提炼”