isolde实现带有过滤分组的瀑布流图文效果代码
代码语言:html
所属分类:瀑布流
代码描述:isolde实现带有过滤分组的瀑布流图文效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en-us"> <head> <meta charset="utf-8"> <meta name="theme-color" content="#ffffff"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=" ie=Edge"> <style> :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: #111; 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/isolde.css"> </head> <body> <header class="header"> <h1 class="header__title"> 带过滤的Masonry瀑布流布局 </h1> </header> <main class="sortable"> <div class="container"> <div class="wrapper"> <ul class="sortable__nav nav"> <li> <a data-isolde-link="all" class="nav__link is-active"> All </a> </li> <li> <a data-isolde-link="flatty" class="nav__link"> Flatty </a> </li> <li> <a data-isolde-link="funny" class="nav__link"> Funny </a> </li> </ul> <div id="isolde" class="isolde-default" style="height: 2076px; opacity: 1;"> <div data-isolde-el="flatty" style="width: 367px; display: block; transform: translate3d(0px, 0px, 0px); opacity: 1;"> <div class="card"> <img class="card__picture" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" 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-isolde-el="flatty" style="width: 367px; display: block; transform: translate3d(387px, 0px, 0px); opacity: 1;"> <div class="card"> <img class="card__picture" src="//repo.bfw.wiki/bfwrepo/image/615643e481963.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90" alt=""> <div class="card-infos"> <h2 class="card__title">Example 2</h2> <p class="card__text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vitae necessitatibus, dolorem similique vero explicabo... </p> </div> </div> </div> <div data-isolde-el="funny" style="width: 367px; display: block; transform: translate3d(0px, 390px, 0px); opacity: 1;"> <div class="card"> <img class="card__picture" src="//repo.bfw.wiki/bfwrepo/image/615643e481963.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_400,/quality,q_90" alt=""> <div class="card-infos"> <h2 class="card__title">Example 3</h2> <p class="card__text"> Lorem ipsum dolor sit amet, consectetur adipisicing.........完整代码请登录后点击上方下载按钮下载查看
网友评论0