js实现瀑布流式tab标签数据筛选效果代码
代码语言:html
所属分类:选项卡
代码描述:js实现瀑布流式tab标签数据筛选效果代码,将所有的数据一次性加载,然后点击不同标签筛选不同的数据显示出来,有动画过渡效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body, html { font-size: 100%; padding: 0; margin: 0;} /* Reset */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body{ background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; } :root{ --main-bg-color: #ff7675; } *, *::after, *::before{ box-sizing: border-box; } html{ font-size: .625em; font-size: calc(1em * .625); background: #f4f4f4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; font: normal 300 1.4em / 1.2 'Open-sans', helvetica, sans-serif; color: #111; } a{ text-decoration: none; color: #111; cursor: pointer; } ol, ul{ list-style: none; margin: 0; padding: 0; } img{ max-width: 100%; } b, strong{ font-weight: 600; } hr{ background: #111; box-shadow: none; border: none; height: 1px; width: 100%; margin: 10px 0; } ::selection{ background: var(--main-bg-color); color: #fff; } ::-moz-selection{ background: var(--main-bg-color); color: #fff; } .container{ width: 100%; max-width: 980px; margin: 0 auto; padding: 0 10px; } .wrapper{ padding: 40px 0; } .card{ background: #fff; border-radius: 6px; box-shadow: 0px 2px 6px rgba(0, 0, 0, .1); display: flex; flex-direction: column; transition: box-shadow .2s ease-in-out; } .card__picture{ display: block; width: 100%; height: auto; border-top-left-radius: 6px; border-top-right-radius: 6px; } .card-infos{ padding: 20px; background: #fff; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .card__title{ font-family: 'Hind'; font-size: 1.8rem; font-weight: 600; line-height: 1.4; margin: 0 0 10px; } .card__text{ font-size: 1.4rem; font-weight: 300; margin: 0; color: #86888A; } .card__text--high{ font-weight: 600; } .header{ background: var(--main-bg-color); height: 160px; display: flex; } .header__title{ margin: auto; font-weight: 300; font-size: 3.2rem; color: #fff; } .header__title--high{ font-weight: 600; } .sortable__nav{ display: flex; justify-content: center; margin-bottom: 20px; } .nav__link{ padding: 0 20px 4px; color: #fff; font-size: 1.4rem; font-weight: 300; display: block; border-bottom: 2px solid transparent; } .nav__link.is-active{ border-color: var(--main-bg-color); } .footer__list.list{ display: flex; justify-content: space-between; align-items: center; } .list__item.item{ display: flex; } .item__link.link{ margin: 0; } .item__link.link:not(:first-child){ margin-left: 20px; } .link__icon{ height: 2rem; width: 2rem; } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/sortable.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sortable.min.js"></script> </head> <body> <main class="sortable"> <div class="container"> <div class="wrapper"> <ul class="sortable__nav nav"> <li> <a data-sjslink="all" class="nav__link"> 所有 </a> </li> <li> <a data-sjslink="flatty" class="nav__link"> 扁平化 </a> </li> <li> <a data-sjslink="funny" class="nav__link"> 创意 </a> </li> </ul> <div id="sortable" class="sjs-default"> <div data-sjsel="flatty"> <div class="card"> <img class="card__picture" src="//repo.bfw.wiki/bfwrepo/image/5e62ef82c83ea.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_150,/quality,q_90" alt=""> <div class="card-infos"> <h2 class="card__title">Example 1</h2> <p class="card__text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, eius, asperiores. Incidunt sapiente est quae iure... </p> </div> </div> </div> <div data-sjsel="flatty"> <div clas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0