html图片瀑布流分类筛选代码

以下是一个简单的基于HTML、CSS和JavaScript的图片瀑布流分类筛选代码示例：

HTML代码：

<div class="filter-buttons">
  <button class="filter-button" data-filter="all">全部</button>
  <button class="filter-button" data-filter="nature">自然</button>
  <button class="filter-button" data-filter="animals">动物</button>
  <button class="filter-button" data-filter="food">美食</button>
</div>

<div class="gallery">
  <div class="gallery-item nature">
    <img src="nature1.jpg" alt="自然1">
  </div>
  <div class="gallery-item animals">
    <img src="animals1.jpg" alt="动物1">
  </div>
  <div class="gallery-item nature">
    <img src="nature2.jpg" alt="自然2">
  </div>
  <div class="gallery-item food">
    <img src="food1.jpg" alt="美食1">
  </div>
  <div class="gallery-item animals">
    <img src="animals2.jpg" alt="动物2">
  </div>
  <div class="gallery-item food">
    <img src="food2.jpg" alt="美食2">
  </div>
</div>

CSS代码：

.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.gallery-item {
  width: 33.33%;
  padding: 10px;
}

.gallery-item img {
  width: 100%;
  height: auto;
}

.filter-buttons {
  margin-bottom: 20px;
}

.filter-button {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background-color: #f2f2f2;
  margin-right: 10px;
  cursor: pointer;
}

.filter-button.active {
  background-color: #4CAF50;
  color: white;
}

JavaScript代码：

const filterButtons = document.querySelectorAll('.filter-button');
const galleryItems = document.querySelectorAll('.gallery-item');

filterButtons.forEach(button => {
  button.addEventListener('click', () => {
    const filter = button.dataset.filter;
    filterButtons.forEach(button => {
      button.classList.remove('active');
    });
    button.classList.add('active');
    galleryItems.forEach(item => {
      if (filter === 'all' || item.classList.contains(filter)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
});

这段代码创建了四个分类筛选按钮，分别对应“全部”、“自然”、“动物”和“美食”四个类别。当用户单击其中一个按钮时，JavaScript代码会根据按钮的数据过滤器属性显示或隐藏相应的图库项。CSS代码为图库项提供了基本的样式和布局。