Bagaimana untuk mencipta galeri imej yang ditapis menggunakan HTML, CSS dan jQuery

Cara menggunakan HTML, CSS dan jQuery untuk mencipta galeri gambar dengan fungsi penapisan

Dengan perkembangan Internet, semakin banyak daripada orang ramai mula mempunyai perpustakaan foto mereka sendiri untuk menyimpan dan memaparkan foto mereka. Untuk mengurus dan memaparkan imej dengan lebih baik, kami boleh menggunakan HTML, CSS dan jQuery untuk mencipta galeri imej dengan keupayaan penapisan. Artikel ini akan memperincikan cara melaksanakan ciri ini, dengan contoh kod khusus.

1. Struktur HTML

Pertama, kita perlu mencipta struktur HTML asas untuk memaparkan galeri imej. Kami boleh menggunakan elemen div sebagai bekas untuk keseluruhan galeri imej dan menggunakan senarai ul untuk memaparkan foto. div 元素作为整个图片库的容器，使用 ul 列表来展示照片。

<div id="gallery">
  <ul class="image-list">
    <li class="image-item">
      <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
    </li>
    <li class="image-item">
      <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
    </li>
    <li class="image-item">
      <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" 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="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
</li>

在 data-categoryrrreee

Gaya CSS
#🎜🎜# Seterusnya, mari tambahkan beberapa gaya asas pada galeri imej. Anda boleh menggunakan CSS untuk menggayakan, reka letak dan menghidupkan imej. #🎜🎜#rrreee
#🎜🎜#Pelaksanaan fungsi penapisan#🎜🎜##🎜🎜##🎜🎜#Sekarang, kami akan melaksanakan fungsi penapisan. Sebagai contoh, kita boleh menapis berdasarkan tag atau kategori imej. Kami boleh menambah kumpulan butang penapis di atas galeri gambar Apabila pengguna mengklik butang, hanya gambar kategori yang sepadan akan dipaparkan. #🎜🎜#rrreee#🎜🎜#Dalam JavaScript, kami akan menggunakan jQuery untuk mengendalikan acara klik butang dan menunjukkan atau menyembunyikan imej berdasarkan keadaan penapis. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mula-mula mendapat syarat penapis untuk mengklik butang. Jika keadaan penapis ialah "semua", semua item gambar dipaparkan. Jika tidak, kami menggunakan kaedah hide() jQuery untuk menyembunyikan semua item imej dan menggunakan kaedah show() untuk menunjukkan item imej yang sepadan dengan kriteria penapis. #🎜🎜#
#🎜🎜#Tag imej dan kategori#🎜🎜##🎜🎜##🎜🎜#Untuk fungsi penapisan berkuat kuasa, kita perlu menambah tag yang sepadan pada setiap imej item atau kategori. Anda boleh menambah atribut data-category pada elemen li untuk mengenal pasti kategori imej. #🎜🎜#rrreee#🎜🎜#Dalam atribut data-category, kami boleh menggunakan sebarang nilai kategori untuk memadankan kriteria penapis butang. #🎜🎜##🎜🎜#Ringkasnya, kami boleh mencipta galeri gambar dengan fungsi penapisan melalui kod HTML, CSS dan jQuery yang ringkas. Pengguna boleh menyemak imbas imej dengan mudah sambil menyusun dan menapis mengikut keutamaan mereka. Harap artikel ini membantu anda! #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk mencipta galeri imej yang ditapis menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!