js+css实现支持搜索过滤网格列表模式切换的图文卡片列表代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现支持搜索过滤网格列表模式切换的图文卡片列表代码，可输入关键字搜索图片，还可滑动滑竿调整图文大小和每行图片数量。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* RESET RULES
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    :root {
      --black: #1a1a1a;
      --white: #fff;
      --gray: #ccc;
      --darkgreen: #18846C;
      --lightbrown: antiquewhite;
      --darkblack: rgba(0,0,0,0.8);
      --minRangeValue: 280px;
    }
    
    * {
      margin: 0;
      padding: 0;  
      outline: none;
      border: none;
    }
    
    button {
      cursor: pointer;
      background: none;
    }
    
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    
    ol,
    ul {
      list-style: none;
    }
    
    a {
      color: inherit;
    }
    
    body {
      margin: 50px 0;
      color: var(--black);
      font: 1rem/1.3 sans-serif;
    }
    
    .gallery {
      padding: 0 2rem;
    }
    
    .container {
      max-width: 1030px;
      margin: 0 auto;
    }
    
    .d-none {
      display: none;
    }
    
    
    /* TOOLBAR
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .toolbar .search-wrapper {
      position: relative;
    }
    
    .toolbar input[type="search"] {
      font-size: 1.1rem;
      border: none;
      border-bottom: 1px solid;
      padding-bottom: 3px;
    }
    
    .toolbar ::-moz-placeholder {
      color: var(--gray);
    }
    
    .toolbar :-ms-input-placeholder {
      color: var(--gray);
    }
    
    .toolbar ::placeholder {
      color: var(--gray);
    }
    
    .toolbar .counter {
      position: absolute;
      left: 0;
      top: calc(100% + 5px);
      font-size: 0.9rem;
      color: var(--gray);
    }
    
    .view-options {
      display: flex;
      align-items: center;
    }
    
    .view-options li:not(:last-child) {
      margin-right: 1.2rem;
    }
    
    .view-options button {
      padding: 2px;
      border: 3px solid transparent;
    }
    
    .view-options .active button {
      border-color: var(--darkgreen);
    }
    
    
    /* IMAGE LIST
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .image-list {
      margin: 3rem 0;
    }
    
    .image-list li {
      background: var(--lightbrown);
      color: var(--darkblack);
    }
    
    .image-list p:first-child {
      font-weight: bold;
      font-size: 1.15rem;
    }
    
    .image-list p:last-child {
      margin-top: 0.5rem;
    }
    
    
    /* GRID VIEW
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .grid-view {
      display: grid;
      grid-gap: 2rem;
      grid-template-columns: repeat(auto-fit, minmax(var(--minRangeValue), 1fr));
    }
    
    .grid-view figcaption {
      padding: 1rem;
    }
    
    
    /* LIST VIEW
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    .list-view li + li {
      margin-top: 1.5rem;
    }
    
    .list-view figure {
      display: grid;
      grid-gap: 1.5rem;
      grid-template-columns: 150px 1fr;
      align-items: center;
    }
    
    
    /* FOOTER
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    footer {
      font-size: 1rem;
      padding: 0 1.5rem;
      text-align: right;
    }
    
    footer span {
      color: #e31b23;
    }
    
    /* MQ
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
    @media screen and (max-width: 900px) {
      .toolbar input[type="range"] {
        display: none;
      }
    }
    
    @media screen and (max-width: 700px) {
      .grid-view li {
        text-align: center;
        padding: 0.5rem;
      }
      
      .grid-view figcaption {
        padding: 0.5rem 0 0;
      }
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <section class="gallery">
        <div class="container">
            <div class="toolbar">
                <div class="search-wrapper">
                    <input type="search" placeholder="Search for photos">
                    <div class="counter">
                        Total photos: <span>12</span></div>
                </div>
                <ul class="view-options">
                    <li class="zoom">
                        <input type="range" min="180" max="380" value="280">
                    </li>
                    <li class="show-grid active">
                        <button disabled>
            <img src="//repo.bfw.wiki/bfwrepo/icon/6379701a5a316.png" alt="grid view">  
          </button>
                    </li>
                    <li class="show-list">
                        <button>
            <img src="//repo.bfw.wiki/bfwrepo/icon/63797029e8b8e.png" alt="list view">  
          </button>
                    </li>
                </ul>
            </div>
            <ol class="image-list grid-view">
                <li>
                    <figure>
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature1.jpg" alt="">
                        <figcaption>
                            <p>green leafed trees</p>
                            <p>Photo by <a href="https://unsplash.com/@redcharlie" target="_blank">redcharlie</a></p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash_nature2.jpg" alt="">
                        <figcaption>
                            <p>landscape photography of brown mountain</p>
                            <p>Photo by <a href="https://unsplash.com/@wilstewart3" target="_blank">Wil Stewart</a></p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="//repo.bfw.wiki/bfwrepo/image/633e20363da3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90" alt="">
                        <figcaption>
                            <p>blue starry night</p>
                            <p>Photo by <a >Mark Basarab</a></p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="//repo.bfw.wiki/bfwrepo/image/6342826200650.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90" alt="">
                        <figcaption>
                            <p>aerial island and beaches</p>
                            <p>Photo by <a href="">Amanda Phung</a></p>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="//repo.bfw.wiki/bfwrepo/image/634282796e5f9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90" alt=&.........完整代码请登录后点击上方下载按钮下载查看