山脉
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="Mountains" 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="Lights" 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="Nature" 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="Car" 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="Car" 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="Car" 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="People" 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="People" 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="People" 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(" ");
}
// 为当前按钮添加 active 类（高亮显示）
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";
});
}
自己动手试一试 »
提示：还可以查看 投资组合画廊
