jquery实现分组过滤筛选数据列表效果代码-html代码-BFW代码库

jquery实现分组过滤筛选数据列表效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现分组过滤筛选数据列表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        body {
        	margin:0;
        }
        .wrapper {
        	display:flex;
        	background:#57068c;
        	width:100%;
        	height:100vh;
        	overflow:hidden;
        	font-family:Helvetica,sans serif;
        	color:#ffffff99;
        }
        .wrapper .title {
        	position:absolute;
        	top:10px;
        	left:20px;
        	font-size:16px;
        	font-weight:600;
        	line-height:20px;
        	text-transform:uppercase;
        	letter-spacing:2px;
        }
        .wrapper .title div {
        	background:#ffffff99;
        	width:20px;
        	height:2px;
        	margin:10px 0;
        }
        .wrapper .credit {
        	position:absolute;
        	bottom:10px;
        	right:20px;
        	font-family:'Sacramento',cursive;
        }
        .wrapper .credit a {
        	color:#fff;
        	text-decoration:none;
        	opacity:.6;
        }
        .wrapper .credit a:hover {
        	opacity:1;
        	text-decoration:underline;
        }
        .artboard {
        	position:relative;
        	margin:auto;
        	width:44vw;
        	height:50vh;
        }
        .filterDivs {
        	padding-top:20px;
        }
        .filterDivs .filterDiv {
        	width:5vw;
        	height:10vmin;
        	display:inline-block;
        	margin:1vw;
        	transition:.5s ease-in-out 0s;
        }
        .filterDivs .yellow {
        	background:#FFD568;
        	opacity:1;
        }
        .filterDivs .blue {
        	background:#91E3FF;
        	opacity:1;
        }
        .filterDivs .pink {
        	background:#FF766D;
        	opacity:1;
        }
        .filterDivs .hide {
        	visibility:hidden;
        	opacity:0;
        	width:0;
        	height:0;
        	margin:0;
        }
        .filters {
        	position:relative;
        	margin:auto;
        	text-align:center;
        }
        .filters div {
        	display:inline-block;
        	text-transform:uppercase;
        	cursor:pointer;
        	margin:4px;
        }
        .filters .active {
        	color:#fff;
        	border-bottom:1px solid #fff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="artboard">
            <div class="f.........完整代码请登录后点击上方下载按钮下载查看