HTML, CSS 및 jQuery를 사용하여 필터링된 이미지 갤러리를 만드는 방법

HTML, CSS 및 jQuery를 사용하여 필터링 기능이 있는 사진 갤러리를 만드는 방법

인터넷이 발전하면서 점점 더 많은 사람들이 사진을 저장하고 표시하기 위한 자신만의 사진 라이브러리를 갖기 시작했습니다. 이미지를 더 잘 관리하고 표시하기 위해 HTML, CSS 및 jQuery를 사용하여 필터링 기능이 있는 이미지 갤러리를 만들 수 있습니다. 이 문서에서는 특정 코드 예제를 통해 이 기능을 구현하는 방법을 자세히 설명합니다.

1. HTML 구조

먼저, 이미지 갤러리를 표시하기 위한 기본 HTML 구조를 만들어야 합니다. div 요소를 전체 이미지 갤러리의 컨테이너로 사용할 수 있고, ul 목록을 사용하여 사진을 표시할 수 있습니다. div 元素作为整个图片库的容器，使用 ul 列表来展示照片。

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

在 data-categoryrrreee

CSS 스타일
🎜다음으로 이미지 갤러리에 몇 가지 기본 스타일을 추가해 보겠습니다. CSS를 사용하여 이미지 스타일을 지정하고 레이아웃하고 애니메이션을 적용할 수 있습니다. 🎜rrreee
🎜필터링 기능 구현🎜🎜🎜이제 필터링 기능을 구현해 보겠습니다. 예를 들어 이미지의 태그나 카테고리를 기준으로 필터링할 수 있습니다. 사진 갤러리 위에 필터 버튼 그룹을 추가할 수 있습니다. 사용자가 버튼을 클릭하면 해당 카테고리의 사진만 표시됩니다. 🎜rrreee🎜JavaScript에서는 jQuery를 사용하여 버튼 클릭 이벤트를 처리하고 필터 조건에 따라 이미지를 표시하거나 숨깁니다. 🎜rrreee🎜위 코드에서는 먼저 버튼 클릭에 대한 필터 조건을 가져옵니다. 필터 조건이 "all"이면 모든 그림 항목이 표시됩니다. 그렇지 않으면 jQuery의 hide() 메서드를 사용하여 모든 이미지 항목을 숨기고 show() 메서드를 사용하여 필터 기준과 일치하는 이미지 항목을 표시합니다. 🎜
🎜이미지 태그 및 카테고리🎜🎜🎜필터링 기능이 작동하려면 각 이미지 항목에 해당 태그나 카테고리를 추가해야 합니다. li 요소에 data-category 속성을 ​​추가하여 이미지 카테고리를 식별할 수 있습니다. 🎜rrreee🎜 data-category 속성에서 버튼의 필터 기준과 일치하는 카테고리 값을 사용할 수 있습니다. 🎜🎜요약하자면 간단한 HTML, CSS, jQuery 코드를 통해 필터링 기능이 있는 사진 갤러리를 만들 수 있습니다. 사용자는 자신의 선호도에 따라 정렬 및 필터링하면서 이미지를 쉽게 탐색할 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 HTML, CSS 및 jQuery를 사용하여 필터링된 이미지 갤러리를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!