带有过滤功能的作品集图库

---

了解如何创建带有过滤功能的作品集图库。

---

My Portfolio

Click on the buttons to filter a category:

Show all Nature Cars People

Mountains

Lorem ipsum dolor..

Lights

Lorem ipsum dolor..

Forest

Lorem ipsum dolor..

Retro

Lorem ipsum dolor..

Fast

Lorem ipsum dolor..

Classic

Lorem ipsum dolor..

Girl

Lorem ipsum dolor..

Man

Lorem ipsum dolor..

Woman

Lorem ipsum dolor..

亲自试一试 »

---

如何创建作品集图库网站

步骤 1) 添加 HTML:

实例

<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('nature')"> Nature</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('people')"> People</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
      <h4>Mountains</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
      <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
      <h4>Lights</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
      <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
      <h4>Forest</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column cars">
    <div class="content">
      <img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
      <h4>Retro</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
      <img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
      <h4>Fast</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
      <img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
      <h4>Classic</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column people">
    <div class="content">
      <img src="/w3images/people1.jpg" alt="People" style="width:100%">
      <h4>Girl</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
      <img src="/w3images/people2.jpg" alt="People" style="width:100%">
      <h4>Man</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
      <img src="/w3images/people3.jpg" alt="People" style="width:100%">
      <h4>Woman</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
<!-- END GRID -->
</div>

---

---

步骤 2) 添加 CSS:

实例

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* 居中网站 */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* 在每列之间添加填充（如果需要）*/
.row,
.row > .column {
  padding: 8px;
}

/* 创建三个彼此相邻浮动的相等列 */
.column {
  float: left;
  width: 33.33%;
  display: none; /* 默认隐藏列 */
}

/* 清除行后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 内容 */
.content {
  background-color: white;
  padding: 10px;
}

/* "show" 类被添加到过滤后的元素中 */
.show {
  display: block;
}

/* 为按钮设置样式 */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* 在鼠标悬停时添加灰色背景颜色 */
.btn:hover {
  background-color: #ddd;
}

/* 为活动按钮添加深色背景颜色 */
.btn.active {
  background-color: #666;
   color: white;
}

---

步骤 3) 添加 JavaScript:

实例

filterSelection("all") // 执行函数并显示所有列
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // 过滤后的元素添加 "show" 类(display:block)，未选中的元素移除 "show" 类
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// 显示过滤后的元素
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// 隐藏未选中的元素
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// 将活动类添加到当前按钮（突出显示它）
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
亲自试一试 »

提示: 另请查看 作品集图库