gridScrollFx实现一个瀑布流图文列表滚动懒加载动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：gridScrollFx实现一个瀑布流图文列表滚动懒加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,900);


        *, *:after, *:before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .clearfix:before, .clearfix:after {
            content: '';
            display: table;
        }
        .clearfix:after {
            clear: both;
        }

        body {
            background: #D3EEE2;
            color: #2E3444;
            font-size: 100%;
            line-height: 1.25;
            font-family: 'Lato', sans-serif;
            font-weight: 300;
        }

        a {
            color: #FF2A48;
            text-decoration: none;
            outline: none;
        }

        a:hover, a:focus {
            color: #2E3444;
        }

        .codrops-header {
            margin: 0 auto;
            padding: 2em;
            text-align: center;
        }

        .codrops-header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 900;
        }

        .codrops-header h1 span {
            display: block;
            padding: 0.2em 0 0.6em 0.1em;
            font-size: 0.6em;
            font-weight: 300;
        }

        /* Demo links */
        .codrops-demos {
            padding-top: 50px;
        }

        .codrops-demos a {
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 15px;
            padding: 5px 2px;
            font-weight: 900;
        }

        .codrops-demos a.current-demo {
            color: #2E3444;
        }

        /* To Navigation Style */
        .codrops-top {
            width: 100%;
            text-transform: uppercase;
            font-weight: 800;
            font-style: normal;
            font-size: 0.69em;
            line-height: 2.2;
        }

        .codrops-top a {
            display: inline-block;
            padding: 0 1em;
            text-decoration: none;
            letter-spacing: 1px;
        }

        .codrops-top span.right {
            float: right;
        }

        .codrops-top span.right a {
            display: block;
            float: left;
        }

        .codrops-icon:before {
            margin: 0 4px;
            text-transform: none;
            font-weight: normal;
            font-style: normal;
            font-variant: normal;
            font-family: 'codropsicons';
            line-height: 1;
            speak: none;
            -webkit-font-smoothing: antialiased;
        }

        .codrops-icon-drop:before {
            content: "\e001";
        }

        .codrops-icon-prev:before {
            content: "\e004";
        }

        section {
            padding: 1em;
            text-align: center;
        }

        .related {
            padding: 15em 0 3em;
            clear: both;
        }

        .related p {
            font-size: 1.5em;
        }

        .related > a {
            border: 1px solid #2E3444;
            display: inline-block;
            text-align: center;
            margin: 20px 10px;
            padding: 25px;
            color: #2E3444;
        }

        .related a:hover {
            border-color: #FF2A48;
            color: #FF2A48;
        }

        .related a img {
            max-width: 100%;
            opacity: 0.8;
        }

        .related a:hover img,
        .related a:active img {
            opacity: 1;
        }

        .related a h3 {
            margin: 0;
            padding: 0.5em 0 0.3em;
            max-width: 300px;
            text-align: left;
        }

@media screen and (max-width: 25em) {

            .codrops-icon span {
                display: none;
            }

        }
        .grid-wrap {
            clear: both;
            margin: 0 auto;
            padding: 0;
            max-width: 1260px;
        }

        .grid {
            margin: 30px auto;
            padding: 0;
            list-style: none;
          
        }

        .js .grid {
            background: url(//repo.bfw.wiki/bfwrepo/icon/5f7abfbff367a.gif) no-repeat 50% 100px;
        }

        .js .grid.loaded {
            background: none;
        }

        .grid li {
            display: inline-block;
            overflow: hidden;
            width: 314px;
            text-align: left;
            vertical-align: top;
        }

        .js .grid li {
            display: none;
            float: left;
        }

        .js .grid.loaded li {
            display: block;
        }

        /* Title box */
        .title-box h2 {
            display: block;
            margin: 7px;
            padding: 20px;
            background: #2E3444;
            color: #D3EEE2;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 300;
        }

        .title-box h2 a {
            display: block;
            font-weight: 900;
        }

        .title-box h2 a:hover {
            color: #D3EEE2;
        }

        /* Anchor and image */
        .grid li > a,
        .grid li img {
            display: block;
            outline: none;
            border: none;
        }

        .grid li > a {
            position: relative;
            overflow: hidden;
            margin: 7px;
        }

        /* Curtain element */
        .grid .curtain {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            background: #96cdc8;
        }

        .grid.swipe-right .curtain {
            -webkit-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
        }

        .grid.swipe-down .curtain {
            -webkit-transform: translate3d(0,-100%,0);
            transform: translate3d(0,-100%,0);
        }

        .grid.swipe-rotate .curtain {
            width: 200%;
            height: 200%;
            -webkit-transform: rotate3d(0,0,1,90deg);
            transform: rotate3d(0,0,1,90deg);
            -webkit-transform-origin: top left;
            transform-origin: top left;
        }

        /* Shadow */
        .grid .curtain::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,1);
            content: '';
        }

        .grid.swipe-right .curtain::after,
        .grid.swipe-rotate .curtain::after {
            left: -100%;
        }

        .grid.swipe-down .curtain::after {
            top: -100%;
        }

        /* Title */
        .grid li h3 {
            position: absolute;
            bottom: 0;
            left: 0;
            margin: 0;
            padding: 20px;
            width: 100%;
            background: #2E3444;
            color: #D3EEE2;
            text-align: right;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 800;
            font-size: 1em;
            -webkit-transition: -webkit-transform 0.2s, color 0.2s;
            transition: transform 0.2s, color 0.2s;
        }

        /* Pseudo element for hover effect */
        .grid li > a::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100.5%;
            height: 100.5%;
            border: 0px solid transparent;
            background: rgba(0,0,0,0);
            content: '';
            -webkit-transition: border-width 0.2s, border-color 0.2s;
            transition: border-width 0.2s, border-color 0.2s;
        }

        /* Hover effects */
        .grid li.shown:hover h3 {
            color: #fff;
            -webkit-transform: translate3d(0,-30px,0);
            transform: translate3d(0,-30px,0);
        }

        .grid li.shown:hover > a::before {
            border-width: 14px;
            border-color: #2E3444;
        }

        /* Animations */

        /* Swipe right */
        .grid.swipe-right li.animate .curtain {
            -webkit-animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
            animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
        }

@-webkit-keyframes swipeRight {
            50%, 60% {
                -webkit-transform: translate3d(0,0,0);
            }
            100% {
                -webkit-transform: translate3d(100%,0,0);
            }
        }

@keyframes swipeRight {
            50%, 60% {
                transform: translate(0);
            }
            100% {
                transform: translate3d(100%,0,0);
            }
        }

        /* Swipe down */
        .grid.swipe-down li.animate .curtain {
            -webkit-animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
            animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
        }

@-webkit-keyframes swipeDown {
            50%, 60% {
                -webkit-transform: translate3d(0,0,0);
            }
            100% {
                -webkit-transform: translate3d(0,100%,0);
            }
        }

@keyframes swipeDown {
            50%, 60% {
                transform: translate(0);
            }
            100% {
                transform: translate3d(0,100%,0);
            }
        }

        /* Swipe rotate */
        .grid.swipe-rotate li.animate .curtain {
            -webkit-animation: swipeRotate 1.5s ease forwards;
            animation: swipeRotate 1.5s ease forwards;
        }

@-webkit-keyframes swipeRotate {
            50%, 60% {
                -webkit-transform: rotate3d(0,0,1,0deg);
            }
            100% {
                -webkit-transform: rotate3d(0,0,1,-90deg);
            }
        }

@keyframes swipeRotate {
            50%, 60% {
                transform: rotate3d(0,0,1,0deg);
            }
            100% {
                transform: rotate3d(0,0,1,-90deg);
            }
        }

        /* Shadow */
        .grid li.animate .curtain::after {
            -webkit-animation: fadeOut 1.5s ease forwards;
            animation: fadeOut 1.5s ease forwards;
            -webkit-animation-delay: inherit;
            animation-delay: inherit;
        }

@-webkit-keyframes fadeOut {
            50%, 60% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

@keyframes fadeOut {
            50%, 60% {
                o.........完整代码请登录后点击上方下载按钮下载查看