山脉
Lorem ipsum dolor..
如何 - 带有过滤功能的投资组合画廊
学习如何创建一个带有过滤功能的投资组合画廊。
我的投资组合
点击按钮过滤类别
灯光
Lorem ipsum dolor..
森林
Lorem ipsum dolor..
复古
Lorem ipsum dolor..
快速
Lorem ipsum dolor..
经典
Lorem ipsum dolor..
女孩
Lorem ipsum dolor..
男人
Lorem ipsum dolor..
女人
Lorem ipsum dolor..
如何创建一个投资组合网站
步骤 1) 添加 HTML
示例
<h2>投资组合</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> 显示全部</button>
<button class="btn" onclick="filterSelection('nature')"> 自然</button>
<button class="btn" onclick="filterSelection('cars')"> 汽车</button>
<button class="btn" onclick="filterSelection('people')"> 人物</button>
</div>
<!-- 投资组合画廊网格 -->
<div class="row">
<div class="column nature">
<div class="content">
<img src="/w3images/mountains.jpg" alt="山脉" style="width:100%">
<h4>山脉</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/w3images/lights.jpg" alt="灯光" style="width:100%">
<h4>灯光</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/w3images/nature.jpg" alt="自然" style="width:100%">
<h4>森林</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars1.jpg" alt="汽车" style="width:100%">
<h4>复古</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars2.jpg" alt="汽车" style="width:100%">
<h4>快速</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars3.jpg" alt="汽车" style="width:100%">
<h4>经典</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people1.jpg" alt="人物" style="width:100%">
<h4>女孩</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people2.jpg" alt="人物" style="width:100%">
<h4>男人</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people3.jpg" alt="人物" style="width:100%">
<h4>女人</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- 网格结束 -->
</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";
});
}
试试看 »
提示: 也可以查看 投资组合画廊
