Comment créer une galerie d'images filtrées en utilisant HTML, CSS et jQuery

Comment utiliser HTML, CSS et jQuery pour créer une galerie d'images avec fonction de filtrage

Avec le développement d'Internet, de plus en plus de personnes ont commencé à disposer de leur propre bibliothèque d'images pour stocker et afficher leurs photos. Afin de mieux gérer et afficher les images, nous pouvons utiliser HTML, CSS et jQuery pour créer une galerie d'images avec fonction de filtrage. Cet article détaillera comment implémenter cette fonctionnalité, avec des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons créer une structure HTML de base pour afficher la galerie d'images. Nous pouvons utiliser l'élément div comme conteneur pour l'intégralité de la galerie d'images et utiliser la liste ul pour afficher les photos. div 元素作为整个图片库的容器，使用 ul 列表来展示照片。

<div id="gallery">
  <ul class="image-list">
    <li class="image-item">
      <img src="image1.jpg" alt="Image 1">
    </li>
    <li class="image-item">
      <img src="image2.jpg" alt="Image 2">
    </li>
    <li class="image-item">
      <img src="image3.jpg" alt="Image 3">
    </li>
    <!-- 更多图片项 -->
  </ul>
</div>

2. CSS 样式

接下来，我们为图片库添加一些基本的样式。可以使用 CSS 来设置图片的样式、布局和动画效果。

#gallery {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.image-item {
  width: 300px;
  margin-bottom: 20px;
}

.image-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s;
}

.image-item img:hover {
  transform: scale(1.1);
}

3. 筛选功能实现

现在，我们将实现筛选功能。例如，我们可以根据图片的标签或类别进行筛选。我们可以在图片库上方添加一个筛选按钮组，用户点击按钮时，只显示相应类别的图片。

<div id="filters">
  <button class="filter-button" data-filter="all">全部图片</button>
  <button class="filter-button" data-filter="nature">自然风景</button>
  <button class="filter-button" data-filter="travel">旅行摄影</button>
  <button class="filter-button" data-filter="food">美食</button>
</div>

在 JavaScript 中，我们将使用 jQuery 来处理按钮点击事件，并根据筛选条件来显示或隐藏图片。

$(document).ready(function() {
  $('.filter-button').click(function() {
    var filter = $(this).data('filter');
    if (filter === 'all') {
      $('.image-item').show();
    } else {
      $('.image-item').hide();
      $('.image-item[data-category="' + filter + '"]').show();
    }
  });
});

在上面的代码中，我们首先获取点击按钮的筛选条件。如果筛选条件为 "all"，则显示所有的图片项。否则，我们会使用 jQuery 的 hide() 方法来隐藏所有图片项，并使用 show() 方法来显示符合筛选条件的图片项。

4. 图片标签和类别

要使筛选功能生效，我们需要为每个图片项添加相应的标签或类别。可以在 li 元素中添加一个 data-category 属性，用来标识图片的类别。

<li class="image-item" data-category="nature">
  <img src="image1.jpg" alt="Image 1">
</li>

在 data-categoryrrreee

Styles CSS
🎜Ensuite, ajoutons quelques styles de base à la galerie d'images. Vous pouvez utiliser CSS pour styliser, mettre en page et animer des images. 🎜rrreee
🎜Implémentation de la fonction de filtrage🎜🎜🎜Maintenant, nous allons implémenter la fonction de filtrage. Par exemple, nous pouvons filtrer en fonction des balises ou des catégories d'images. Nous pouvons ajouter un groupe de boutons de filtre au-dessus de la galerie d'images Lorsque l'utilisateur clique sur le bouton, seules les images de la catégorie correspondante seront affichées. 🎜rrreee🎜En JavaScript, nous utiliserons jQuery pour gérer les événements de clic sur les boutons et afficher ou masquer les images en fonction des conditions de filtre. 🎜rrreee🎜Dans le code ci-dessus, nous obtenons d'abord les conditions de filtre pour cliquer sur le bouton. Si la condition de filtre est "tout", tous les éléments d'image sont affichés. Sinon, nous utilisons la méthode hide() de jQuery pour masquer tous les éléments d'image, et utilisons la méthode show() pour afficher les éléments d'image qui correspondent aux critères de filtre. 🎜
🎜Balises et catégories d'images🎜🎜🎜Pour que la fonction de filtrage fonctionne, nous devons ajouter la balise ou la catégorie correspondante à chaque élément d'image. Vous pouvez ajouter un attribut data-category à l'élément li pour identifier la catégorie de l'image. 🎜rrreee🎜Dans l'attribut data-category, nous pouvons utiliser n'importe quelle valeur de catégorie pour correspondre aux critères de filtre du bouton. 🎜🎜Pour résumer, nous pouvons créer une galerie d'images avec fonction de filtrage via un simple code HTML, CSS et jQuery. Les utilisateurs peuvent facilement parcourir les images tout en triant et en filtrant selon leurs préférences. J'espère que cet article vous aidera ! 🎜

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!