js+css实现三种瀑布流布局方式15种图片布局进入动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：瀑布流
代码描述：js+css实现三种瀑布流布局方式15种图片布局进入动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *,
    *::after,
    *::before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Roboto Mono', monospace;
        font-size: 14px;
        font-weight: 500;
        color: #82888a;
        background: #2c2d31;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }
    
    .js .loading::before,
    .js .loading::after {
        content: '';
        position: fixed;
        z-index: 1000;
    }
    
    .loading::before {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #2c2d31;
    }
    
    .loading::after {
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
        border: 8px solid #383a41;
        border-bottom-color: #565963;
        border-radius: 50%;
        animation: animLoader 0.8s linear infinite forwards;
    }
    
    @keyframes animLoader {
        to { transform: rotate(360deg); }
    }
    
    a {
        text-decoration: none;
        color: #f2f2f2;
        outline: none;
    }
    
    a:hover,
    a:focus {
        color: #e6629a;
    }
    
    .hidden {
        position: absolute;
        overflow: hidden;
        width: 0;
        height: 0;
        pointer-events: none;
    }
    
    main {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* Icons */
    .icon {
        display: block;
        width: 1.5em;
        height: 1.5em;
        margin: 0 auto;
        fill: currentColor;
    }
    
    .content--side {
        position: relative;
        z-index: 100;
        width: 15vw;
        min-width: 130px;
        max-height: 100vh;
        padding: 0 1em;
        order: 2;
    }
    
    .content--center {
        flex: 1;
        max-width: calc(100vw - 260px);
        order: 3;
    }
    
    .content--right {
        order: 4;
    }
    
    .content--related {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 8em 1em 3em;
        text-align: center;
        order: 5;
    }
    
    .media-related {
        width: 100%;
    }
    
    .media-item {
        padding: 1em;
    }
    
    .media-item__img {
        max-width: 100%;
        opacity: 0.7;
        transition: opacity 0.3s;
    }
    
    .media-item:hover .media-item__img,
    .media-item:focus .media-item__img {
        opacity: 1;
    }
    
    .media-item__title {
        font-size: 1em;
        max-width: 220px;
        padding: 0.5em;
        margin: 0 auto;
    }
    
    /* Header */
    .codrops-header {
        position: relative;
        z-index: 100;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 3em 1em 4em;
        order: 1;
    }
    
    .codrops-header__title {
        font-size: 1em;
        font-weight: normal;
        flex: 1;
        margin: 0 7em 0 0;
        text-align: center;
        text-transform: lowercase;
    }
    
    .codrops-header__title::before,
    .codrops-header__title::after {
        font-size: 22px;
        font-weight: bold;
        display: inline-block;
        padding: 0 0.25em;
        color: #42454c;
    }
    
    .codrops-header__title::after {
        content: '\2309';
        vertical-align: sub;
    }
    
    .codrops-header__title::before {
        content: '\230A';
    }
    
    /* GitHub corner */
    .github-corner {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .github-corner__svg {
        fill: #82888a;
        color: #2c2d31;
        position: absolute; 
        top: 0; 
        border: 0; 
        right: 0;
    }
    
    .github-corner:hover .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
    }
    
    @keyframes octocat-wave {
        0%,
        100% {
                transform: rotate(0);
        }
        20%,
        60% {
                transform: rotate(-25deg);
        }
        40%,
        80% {
                transform: rotate(10deg);
        }
    }
    
    @media (max-width:500px) {
        .github-corner:hover .octo-arm {
                animation: none;
        }
        .github-corner .octo-arm {
                animation: octocat-wave 560ms ease-in-out;
        }
    }
    
    
    /* Top Navigation Style */
    .codrops-links {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 2.75em;
        margin: 0 0 0 2.25em;
        text-align: center;
        white-space: nowrap;
        background: #1f2125;
    }
    
    .codrops-links::after {
        content: '';
        position: absolute;
        top: -10%;
        left: calc(50% - 1px);
        width: 2px;
        height: 120%;
        background: #2c2d31;
        transform: rotate3d(0,0,1,22.5deg);
    }
    
    .codrops-icon {
        display: inline-block;
        padding: 0 0.65em;
    }
    
    /* Controls */
    .control--grids {
        margin: 0 0 2.5em;
        text-align: right;
    }
    
    .control__title {
        font-size: 0.85em;
        display: block;
        width: 100%;
        margin: 0 0 1em;
        color: #e6629a;
    }
    
    .control__item {
        position: relative;
        display: block;
        margin: 0 0 0.5em;
    }
    
    .control__radio {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
    }
    
    .control__label {
        white-space: nowrap;
    }
    
    .control__radio:checked + .control__label {
        color: #fff;
        background: #673ab7;
    }
    
    .control__radio:not(:checked):hover + .control__label,
    .control__btn:hover {
        color: white;
    }
    
    .control__btn {
        display: block;
        width: 100%;
        margin: 0 0 0.5em;
        padding: 0;
        text-align: left;
        color: inherit;
        border: none;
        background: none;
    }
    
    .control__btn:focus {
        outline: none;
    }
    
    /* Grid */
    
    .grid {
        position: relative;
        z-index: 2;
        display: block;
        margin: 0 auto;
    }
    
    .grid--hidden {
        position: fixed !important;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        pointer-events: none;
        opacity: 0;
    }
    
    .js .grid--loading::before,
    .js .grid--loading::after {
        content: '';
        z-index: 1000;
    }
    
    .js .grid--loading::before {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #2c2d31;
    }
    
    .js .grid--loading::after {
        position: absolute;
        top: calc(25vh - 20px);
        left: 50%;
        width: 40px;
        height: 40px;
        margin: 0 0 0 -20px;
        border: 8px solid #383a41;
        border-bottom-color: #565963;
        border-radius: 50%;
        animation: animLoader 0.8s linear forwards infinite;
    }
    
    .grid__sizer {
        margin-bottom: 0 !important;
    }
    
    .grid__link,
    .grid__img {
        display: block;
    }
    
    .grid__img {
        width: 100%;
    }
    
    .grid__deco {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }
    
    .grid__deco path {
        fill: none;
        stroke: #fff;
        stroke-width: 2px;
    }
    
    .grid__reveal {
        position: absolute;
        z-index: 50;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0;
        background-color: #2c2d31;
    }
    
    .grid .grid__item,
    .grid .grid__sizer {
        width: calc(50% - 20px);
        margin: 0 10px 20px;
    }
    
    @media screen and (min-width: 60em) {
        .grid .grid__item,
        .grid .grid__sizer {
                width: calc((100% / 3) - 20px);
                margin: 0 10px 20px;
        }
    }
    
    @media screen and (min-width: 70em) {
        .grid .grid__item,
        .grid .grid__sizer {
                width: calc(25% - 30px);
                margin: 0 15px 30px;
        }
        /* Grid types */
        .grid--type-b .grid__item,
        .grid--type-b .grid__sizer {
                width: calc(20% - 20px);
                margin: 0 10px 20px;
        }
    
        .grid--type-c .grid__item,
        .grid--type-c .grid__sizer {
                width: calc(25% - 16px);
                margin: 0 8px 16px;
        }
    }
    
    @media screen and (max-width: 50em) {
        main {
                display: block;
        }
        .codrops-header {
                padding: 1em;
                flex-wrap: wrap;
        }
        .codrops-links {
                margin: 0;
        }
        .codrops-header__title {
                width: 100%;
                text-align: left;
                flex: none;
                margin: 1em 0;
        }
        .content--side {
                width: 100%;
        }
        .content--right {
                order: 3;
        }
        .content--center {
                max-width: 100vw;
        }
        .control {
                margin: 0 0 1em;
                text-align: left;
        }
        .control__item,
        .control__btn {
                display: inline-block;
        }
        .control__btn {
                width: auto;
        }
    }
    .pater {
        position: relative;
        display: block;
        overflow: hidden;
        width: 100%;
        padding: 0 0 1em;
        background: #fff;
    }
    
    .pater,
    .pater:focus,
    .pater:hover {
        color: #2c2d31;
    }
    
    .pater::after {
        content: 'Sponsor';
        font-size: 0.765em;
        position: absolute;
        z-index: 20;
        bottom: 0;
        left: 0;
        padding: 1em;
        color: #f1bed4;
    }
    
    .pater__img {
        width: 100%;
        height: 120px;
        background: url(data:image/jpeg;base64,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) no-repeat center center;
        background-size: cover;
    }
    
    .pater__content {
        font-size: 0.85em;
        z-index: 9;
        padding: 1.5em 1em;
        text-align: center;
    }
    
    .pater__title {
        font-size: 1em;
        margin: 0;
        color: #ca6694;
    }
    
    .pater__call {
        font-weight: bold;
    }
    
    @media screen and (min-width: 50em) {
        .pater {
                height: 240px;
                background: #1f2125;
        }
        .pater--small {
                height: 200px;
        }
        .pater,
        .pater:focus,
        .pater:hover {
                color: #82888a;
        }
        .pater__img {
                position: absolute;
                z-index: 10;
                top: 0;
                left: 0;
                height: 100%;
        }
        .pater__call {
                color: #fff;
        }
        /* Hover Animation */
        .pater__img,
        .pater__content,
        .pater::after {
                transition: transform 0.3s, opacity 0.3s;
        }
    
        .pater:hover::after {
                opacity: 0;
                transform: translate3d(0,20px,0);
        }
    
        .pater:hover .pater__img {
                transform: translate3d(0,100px,0) scale3d(0.7,0.7,1);
        }
    
        .pater--small:hover .pater__img {
                transform: translate3d(0,100%,0);
        }
    
        .pater__content {
                position: absolute;
                top: 50px;
                left: 0;
                width: 100%;
                height: 100%;
        }
    
        .pater--small .pater__content {
                display: flex;
                flex-direction: column;
                justify-content: center;
        }
    
        .pater:hover .pater__content {
                transform: translate3d(0,-50px,0);
        }
    }
    </style>

    <script>
        document.documentElement.className = 'js';
    </script>

</head>

<body class="loading">

    <main>
        <header class="codrops-header"></header>
        <div class="content content--side">
            <div class="control control--grids">
                <span class="control__title">switch layout</span>
                <div class="control__item">
                    <input class="control__radio" type="radio" name="grid-type" value="grid--type-a" id="control-grid-a" checked>
                    <label class="control__label" for="control-grid-a">grid A</label>
                </div>
                <div class="control__item">
                    <input class="control__radio" type="radio" name="grid-type" value="grid--type-b" id="control-grid-b">
                    <label class="control__label" for="control-grid-b">grid B</label>
                </div>
                <div class="control__item">
                    <input class="control__radio" type="radio" name="grid-type" value="grid--type-c" id="control-grid-c">
                    <label class="control__label" for="control-grid-c">grid C</label>
                </div>
            </div>
        </div>
        <div class="content content--side content--right">
            <div class="control control--effects">
     .........完整代码请登录后点击上方下载按钮下载查看