Recréer la disposition de la recherche Google Images avec CSS-Industrie informatique-php.cn

Recréer la disposition de la recherche Google Images avec CSS

Les plats clés

Recréer la disposition de la recherche d'images de Google implique la création d'une structure HTML de base pour les images, les styler avec CSS et l'ajout de fonctionnalités avec JavaScript.
Les propriétés CSS clés utilisées dans ce processus incluent l'affichage, la grille-template-colonnes, la grille-gap et l'objet. Ces propriétés aident à créer une disposition de grille, à spécifier le nombre et la taille des colonnes, définir l'espace entre les cellules de la grille et dicter comment une image doit être redimensionnée pour s'adapter à son conteneur.
La disposition peut être personnalisée pour répondre aux besoins individuels. Cela comprend la modification du nombre et de la taille des colonnes dans la grille, l'écart entre les cellules de la grille et la taille des images. Des propriétés CSS supplémentaires peuvent également être ajoutées pour une personnalisation plus approfondie.
peut être ajoutée aux images à l'aide de JavaScript. Des exemples de cela comprennent l'ajout d'un écouteur d'événements aux images qui ouvrent une version plus grande de l'image lors du clic, et de l'ajout de fonctionnalités telles que le filtrage d'image ou le tri.
La disposition peut être rendue réactive en utilisant des requêtes multimédias dans CSS. Ceux-ci permettent d'appliquer différents styles en fonction de la taille de l'écran de l'utilisateur, garantissant que les images sont affichées correctement sur tous les appareils.

Dans un projet dans lequel j'ai été récemment impliqué, on m'a demandé de recréer la fonctionnalité d'expansion de la recherche d'images de Google, similaire à la capture d'écran ci-dessous, mais dans un format de grille rigide.

Recréer la disposition de la recherche Google Images avec CSS

Ma réaction immédiate a été que je devrais utiliser JavaScript pour définir certaines propriétés de mise en page et de modèle de boîte que je suis toujours réticent à faire et ne fera jamais qu'en dernier recours. Comme il y avait un exemple déjà parfaitement fonctionnel, j'ai décidé d'ouvrir des outils de développeur pour voir comment Google le fait (pourquoi réinventer la roue, non?)

Il s'avère que Google décompose la structure en deux divs, un div contient toutes les cellules d'image et l'autre div est pour la zone en expansion. Une fois qu'une image est cliquée (et élargie), JavaScript insère un div d'espaceur après la dernière cellule d'image de la ligne du div cliqué. JavaScript définit sa hauteur à la même chose que la div étendue et positionne la div étendue absolument dans la position que la div d'espaceur occupe. C'est intelligent, mais pas idéal en raison de sa forte dépendance à l'égard de JavaScript.

J'avais une idée de base que j'ai réussi à devenir une démo de travail en utilisant CSS pour toutes les propriétés de mise en page et de modèle de boîte. Le seul JavaScript nécessaire est de modifier les noms de classe en fonction de la bascule d'extension.

le balisage de base

Tout d'abord, nous devons construire le conteneur .image-grid avec chaque .image__cell. Voici le 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>

Copier après la connexion

Le balisage ci-dessus contient un exemple de l'élément de cellule d'image qui devra être dupliqué pour chaque image de la grille. Veuillez noter les identifiants pour # close-jump-1 et # expand-jump-1, et les attributs HREF suivants devront être uniques à .image__cell. Les liens de hachage tels que: href = "# expand-jump-1" permettent au navigateur de passer à la cellule d'image active lorsqu'il est enfoncé.

le CSS

Nous appliquons d'abord la taille de la boîte: Border-Box; à tous les éléments, y compris: avant et: après des pseudo-éléments utilisant le sélecteur universel. Cela permettra une manipulation facile des éléments qui mélangent les largeurs de pourcentage avec des valeurs de rembourrage fixes, car elle les combine.

<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>

Copier après la connexion

L'élément .Image-Grid reçoit un débordement ClearFix: Hidden; Pour maintenir la disposition basée sur les flotteurs de cellules d'image.

<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>

Copier après la connexion

La largeur donnée à la cellule d'image équivaut à 100 divisée par le nombre d'éléments par ligne, exprimée en pourcentage. Dans cet exemple, il y a 5 éléments par ligne, ce qui signifie que chaque .image__cell a 20% de large.

Notez que le rembourrage: 10px 5px 0; appliqué à .image-grid combiné avec le rembourrage: 0 5px; sur .image - basic et hauteur: 10px; sur .image__cell.is-collapsed .arrow-up Abandonnez l'effet de cadre de fenêtre égal autour des images carrelées. Nous pourrions augmenter l'écart entre les images, en modifiant ces valeurs.

Enfin, l'élément d'image .basic__img est donné Affichage: Block; pour éviter tout problème d'espacement. Theax-Width: 100%; et hauteur: auto; Les déclarations permettent à l'image de s'étendre à la largeur de son conteneur tout en ne dépassant pas sa propre largeur.

Le CSS ci-dessous fournit la disposition de la zone extensible.

<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>

Copier après la connexion

Voici quelques notes à retirer du code ci-dessus:

Le curseur se transforme en pointeur lorsqu'il oscille sur .image - Basic lorsqu'il n'est que dans un état effondré. Cela donne un indicateur visuel à l'utilisateur que cliquer sur l'image fera quelque chose.
L'élément maximal de l'élément .Image-Expand est défini sur 0 dans son état initial. La hauteur maximale reçoit une valeur de 500px lorsque l'élément .Image-cellule a la classe .is-expansée. Notez que si la zone en expansion devait augmenter, la valeur maximale de hauteur devrait également être augmentée pour que toute la zone s'affiche.
Les transitions appliquées à la hauteur maximale et au fond de marge permettent un effet glissant lorsque la zone élargie est basculée.
Visuellement, nous voulons que la zone en expansion s'aligne sur le .Image-Grid. Pour ce faire, nous devons annuler le rembourrage horizontal ensemble dans l'élément .image-grid.
1. Tout d'abord, .image - Expand est donné la taille de boîte: contenu-box; Pour exclure la valeur de rembourrage de sa largeur.
2. L'élément .image - Expand a une largeur 5 fois son élément parent à 500%. Cela permet à la zone élargie d'occuper toute la largeur du .Image-Grid, moins le rembourrage.
3. pour occuper l'espace restant, l'élément .Image - Expansion reçoit un rembourrage de 5px à gauche et à droite.
4. La position: relative; et à gauche: -5px Les déclarations déplacent légèrement la zone élargie vers la gauche pour annuler la valeur de rembourrage.

Nous voulons déplacer tous les éléments. Image - Expansion à l'extrême gauche en alignement avec le côté gauche du .Image-Grid. Pour ce faire, nous définissons une marge négative en fonction de sa position dans la ligne.

C'est là que le Ndth of-Type se trouve:

Au départ, j'ai utilisé le Neh-Child pour réaliser le même effet, mais sur d'autres projets, j'ai trouvé que iOS8 Safari était assez buggy avec cela, donc j'essaie d'éviter de l'utiliser. Au lieu de cela, j'utilise le Nième de type car il sert en grande partie le même objectif. Si vous êtes intéressé, vous pouvez trouver une brève explication de la n ° de type ici <.><section class="image-grid"> <div class="image__cell is-collapsed"> <div class="image--basic"> <a href="#expand-jump-1"> <img id="expand-jump-1" class="basic__img" src="https://lorempixel.com/250/250/fashion/1" alt="Fashion 1"> </a> <div class="arrow--up"></div> </div> <div class="image--expand"> <a href="#close-jump-1" class="expand__close"></a> <img class="image--large" src="https://lorempixel.com/400/400/fashion/1" alt="Fashion 1"> </div> </div> ... </section>

Dans le CSS ci-dessus, nous ciblons les zones extensibles les deuxième, troisième et quatrième .Image__cell sur chaque ligne. La valeur de marge-gauche dépend également de la position de l'élément dans la ligne. Notez que le premier élément de chaque ligne n'a pas besoin d'une valeur de marge-gauche définie car elle est déjà dans la position souhaitée. Plus l'élément est loin de la gauche, plus nous devons repousser la zone extensible vers le côté gauche (par incréments de -100%). Sans cela, la zone extensible serait alignée sur son parent, comme indiqué ci-dessous:

Recréer la disposition de la recherche Google Images avec CSS Nous devons également insérer le CSS illustré ci-dessous pour nous assurer que la première .Image__cell sur chaque ligne, à part la première rangée, colle à sa position lorsque les éléments. Image__cell plus tôt sont élargis.

Maintenant que la disposition de base est en place, nous pouvons ajouter quelques styles pour améliorer l'expérience utilisateur.

<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>

Copier après la connexion

Tout d'abord, une flèche pointant pour indiquer l'image à laquelle appartient le bloc expansé:

Notez que le style de flèche est réalisé en créant un triangle CSS, en économisant ainsi une demande HTTP. Cet effet est facilement réalisé par une utilisation intelligente des frontières et la définition de la hauteur et de la largeur sur 0.

<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>

Copier après la connexion

Nous voulons également que la flèche n'apparaît que lorsque l'élément .image__cell est élargi. Ceci est fait par l'ajout de la classe .is-expansée. Enfin, nous voulons que la flèche reste dans le centre horizontal de l'élément .image__cell donc marge: 0 auto; est appliqué.

Maintenant, nous sommes prêts à coiffer le bouton «Fermer» qui permettra à l'utilisateur de fermer la zone élargie.

<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>

Copier après la connexion

Notez qu'en utilisant A: Avant le pseudo-élément, nous pouvons insérer un caractère «×» sur la page sans qu'il apparaisse dans le DOM, enregistrant à nouveau au moins une demande HTTP. Le caractère spécial inséré est le caractère de multiplication que Boostrap utilise également.

le jQuery

Enfin, la jQuery ci-dessous bascule simplement entre la classe .is-expansée et .is-collated en cliquant sur chaque cellule d'image et le bouton Fermer.

<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>

Copier après la connexion

Bien sûr, vous pourriez facilement éviter JQuery en utilisant `Classlist () 'et d'autres techniques natives, mais vous n'obtiendrez pas un support de navigateur profond à moins que vous ne disposiez de polyfill.

Rendre la grille réactive

Avoir 5 cellules d'image sur chaque ligne sur des appareils plus petits n'est pas idéal, nous pouvons donc modifier le nombre d'éléments par ligne à l'aide de requêtes multimédias. Par exemple, le CSS ci-dessous le réduit à 2 images par ligne.

<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>

Copier après la connexion

Pour empêcher le CSS appliqué plus tôt concernant 5 éléments par ligne, nous devrons réinitialiser ces valeurs ou extraire les propriétés et les placer dans leur propre requête multimédia, qui se fait dans le code ci-dessous, ainsi que le code précédent.

Voir la recherche sur les images Google dans CSS par SitePoint (@SitePoint) sur Codepen.

Notez l'inclusion de la fonction de cellules qui crache 50 cellules d'image pour me sauver la dérange.

pour les amateurs de sass

Je ne voulais pas exclure les lecteurs qui n'utilisent pas Sass lors de la rédaction de cet article, mais je ne voulais pas non plus les écarter. Ce projet se prête comme un excellent cas d'utilisation pour Sass en développement, car le nombre d'articles par ligne est lié à de nombreuses propriétés différentes.

Veuillez consulter la démonstration de code de code suivante suivante. Notez que dans cette démo, j'utilise des variables SASS en haut du CSS, ce qui me permet de spécifier l'écart entre les images, la largeur d'image maximale et les images minimales et maximales par ligne. En utilisant divers calculs, le SASS se compilera en CSS en fonction des options fournies. Il calculera automatiquement les requêtes multimédias optimales en fonction du nombre maximum d'éléments par ligne, qui maintiendra les images dans leurs dimensions maximales.

Cette version SASS est expérimentale, mais veuillez me faire savoir si vous remarquez des bogues ou des améliorations de code potentielles dans la version ordinaire ou la version SASS.

Questions fréquemment posées (FAQ) sur la recréation de la mise en page de recherche sur les images Google avec CSS

Comment puis-je recréer la disposition de la recherche de Google Images à l'aide de CSS?

Recréer la disposition de la recherche de Google Images à l'aide de CSS implique quelques étapes. Tout d'abord, vous devez créer une structure HTML de base pour vos images. Cela inclut la création d'un div pour chaque image et l'attribuer une classe. Ensuite, vous devez coiffer ces divs en utilisant CSS pour imiter la disposition des images Google. Cela implique de définir la largeur et la hauteur des Divs, ainsi que leur position sur la page. Vous pouvez également ajouter des effets de survol aux images à l'aide de CSS. Enfin, vous pouvez utiliser JavaScript pour ajouter des fonctionnalités aux images, telles que l'ouverture d'une version plus grande de l'image lorsqu'elle est cliquée.

Quelles sont les principales propriétés CSS utilisées pour recréer la disposition des images Google?

Les propriétés CSS clés utilisées pour recréer la disposition des images Google incluent l'affichage, la grille-template-colonnes, la grille et l'adaptation d'objet. La propriété d'affichage est définie sur Grid pour créer une disposition de grille. La propriété des colonnes de la grille est utilisée pour spécifier le nombre et la taille des colonnes dans la grille. La propriété Grid-Gap est utilisée pour définir l'écart entre les cellules de la grille. La propriété d'objet-ats est utilisée pour spécifier comment une image doit être redimensionnée pour s'adapter à son conteneur.

Puis-je personnaliser la mise en page pour répondre à mes propres besoins?

Oui, vous pouvez personnaliser la mise en page pour répondre à vos propres besoins. Vous pouvez modifier le nombre et la taille des colonnes dans la grille, l'écart entre les cellules de la grille et la taille des images. Vous pouvez également ajouter des propriétés CSS supplémentaires pour personnaliser davantage la disposition, telles que l'ajout de bordures ou d'ombres aux images.

Comment puis-je ajouter des fonctionnalités aux images?

Vous pouvez ajouter des fonctionnalités à la fonctionnalité Images utilisant JavaScript. Par exemple, vous pouvez ajouter un écouteur d'événements aux images qui ouvrent une version plus grande de l'image lorsqu'elle est cliquée. Vous pouvez également ajouter des fonctionnalités telles que le filtrage ou le tri des images.

Pourquoi ma mise en page ne ressemble pas à la disposition des images Google?

Si votre mise en page ne ressemble pas à la disposition des images Google, il pourrait y avoir être plusieurs raisons. Tout d'abord, assurez-vous que vous avez correctement implémenté les propriétés CSS. Deuxièmement, vérifiez si vos images sont du même rapport d'aspect. Google Images utilise des images du même rapport d'aspect pour créer une disposition uniforme. Si vos images sont des rapports d'aspect différents, la mise en page peut ne pas se ressembler.

comment puis-je rendre ma mise en page réactive?

Vous pouvez rendre votre disposition réactive en utilisant des requêtes multimédias dans votre CSS . Les requêtes multimédias vous permettent d'appliquer différents styles en fonction de la taille de l'écran de l'utilisateur. Par exemple, vous pouvez modifier le nombre de colonnes dans la grille sur des écrans plus petits pour vous assurer que les images sont toujours affichées correctement.

Puis-je utiliser cette mise en page pour d'autres types de contenu, pas seulement des images?

Oui, vous pouvez utiliser cette mise en page pour d'autres types de contenu, pas seulement des images. Vous pouvez l'utiliser pour afficher du texte, des vidéos ou tout autre type de contenu. Assurez-vous simplement d'ajuster les propriétés CSS en conséquence pour ajuster le type de contenu que vous affichez.

Comment puis-je ajouter des effets de survol aux images?

Vous pouvez ajouter des effets de survol aux images en utilisant Le: planer pseudo-classe dans votre CSS. Par exemple, vous pouvez modifier la couleur de la bordure de l'image lorsque l'utilisateur le plane dessus, ou vous pouvez afficher des informations supplémentaires sur l'image.

Pourquoi mes images ne s'adaptent-elles pas correctement aux cellules de la grille?

Si vos images ne s'adaptent pas correctement aux cellules de la grille, cela pourrait être dû au rapport d'aspect des images n'est pas la même que le rapport d'aspect des cellules de la grille. Vous pouvez résoudre ce problème en utilisant la propriété d'objet-ajustement dans votre CSS pour spécifier comment les images doivent être redimensionnées pour s'adapter à leur conteneur.

Puis-je utiliser cette mise en page avec un CMS comme WordPress?

Oui, vous pouvez utiliser cette mise en page avec un CMS comme WordPress. Vous devez ajouter le CSS au fichier style.css de votre thème et le HTML au fichier de modèle approprié. Vous devrez peut-être également ajouter du code PHP pour générer dynamiquement le HTML pour les images, en fonction de la configuration de votre site WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!