问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在Bootstrap用Masonry 实现瀑布流的无限加载方式以及点击才加载方式。

头像
murusheng
    28611

    采用了很多网上的方式，没能实现，故发贴请教

    1.如何在Bootstrap用Masonry 实现瀑布流的无限加载方式?
    2.如何在Bootstrap用Masonry 实现瀑布流的点击才加载方式。

    <!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网站</title>
    <meta name="description" content="">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        @media (min-width: 518px) and (max-width: 669px) {
            .container {
                width: 476px;
            }
        }
        
        @media (min-width: 670px) and (max-width: 741px) {
            .container {
                width: 696px;
            }
        }
        
        @media (min-width: 1400px) {
            .container {
                width: 1365px;
            }
        }
        
        @media (min-width: 1640px) {
            .container {
                width: 1585px;
            }
        }
        
        .loadMeinvMOre {
            height: 34px;
            line-height: 30px;
            color: #999;
            text-align: center;
            background: #f7f7f7;
            display: block;
            clear: both;
            text-decoration: none;
            margin: auto 10px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .project-cover-1 {
            background: #fff;
            border-radius: 0px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            float: left;
            margin: 0 10px 20px 10px;
            width: 202px;
        }
        
        .clearfix::after {
            clear: both;
            display: block;
            height: 0;
            content: '';
        }
        
        ul,
        li {
            list-style: none;
        }
        
        #switch-1 li {
            position: relative;
            width: 202px;
            height: 157px;
            line-height: 157px;
            text-align: center;
            float: left;
            cursor: pointer;
            overflow: hidden;
        }
        
        #switch-1 li p {
            height: 157px;
            width: 100%;
            position: absolute;
            left: 0;
            top: -157px;
            color: #ccc;
            z-index: 2;
        }
        
        #switch-1 li .img {
            width: 202px;
            height: 157px;
            display: block;
            -moz-transition: .5s ease-in;
            -webkit-transition: .5s ease-in;
            -o-transition: .5s ease-in;
            -ms-transition: .5s ease-in;
            transition: .5s ease-in;
        }
        
        #switch-1 li:hover .img {
            transform: scale(1.1, 1.1);
            -moz-transform: scale(1.1, 1.1);
            -webkit-transform: scale(1.1, 1.1);
            -o-transform: scale(1.1, 1.1)
        }
        
        #switch-1 li p i {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            background: #000000;
            opacity: 0.7;
            -moz-opacity: 0.7;
            filter: alpha(opacity=70);
            font-size: 16px;
        }
        
        #switch-1 li p span {
            display: block;
            width: 94%;
            margin: 0 auto;
            line-height: 18px;
            font-size: 12px;
            padding-top: 60px;
        }
        
        #switch-1 li p a {
            display: block;
            position: absolute;
            width: 32px;
            height: 32px;
            left: 50%;
            margin-left: -16px;
            top: 20px;
            background: url("/img/link.png") no-repeat 0 0;
        }
        
        @media (max-width: 339px) {
            .project-cover-1 {
                margin: 0px 0px 20px 8px;
                width: 135px;
            }
            #switch-1 li {
                width: 135px;
                height: 157px;
                line-height: 157px;
            }
            .loadMeinvMOre {
                margin: auto 0px;
            }
        }
        
        @media (min-width: 340px) and (max-width: 399px) {
            .project-cover-1 {
                width: 152px;
            }
            #switch-1 li {
                width: 152px;
                height: 157px;
                line-height: 157px;
            }
            .loadMeinvMOre {
                margin: auto 0px;
            }
        }
        
        @media (min-width: 400px) and (max-width: 550px) {
            .project-cover-1 {
                width: 172px;
            }
            #switch-1 li {
                width: 172px;
                height: 157px;
                line-height: 157px;
            }
            .loadMeinvMOre {
                margin: auto 0px;
            }
        }

    </style>
</head>

<body>
    <header role="banner">
        <nav role="navigation" class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Project name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!--/.container -->
        </nav>
    </header>

    <section id="impact" style="margin-top:40px;">
        <div class="container">
            <div class="reviews js-masonry" data-masonry-options="{&quot;itemSelector&quot;: &quot;.hreview&quot; }">

                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                <div class="project-cover-1" id="switch-1" data-id="52779101" data-ordinal="1" data-category="" data-type="">
                    <li class="cover-img">
                        <a href="https://www.behance.net/gallery/52779101/Paulig-Kulma" class="cover-img-link "> <img src="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg" srcset="https://mir-s3-cdn-cf.behance.net/projects/202/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg, https://mir-s3-cdn-cf.behance.net/projects/404/38c8eb52779101.Y3JvcCw0MTAxLDMyMTAsMTAyMiww.jpg 2x" alt="Paulig Kulma" title="Paulig Kulma" class="cover-img-el"> </a>
                        <p>
                            <span>如果有来生，我要做一棵树，站成永恒，没有悲欢的姿势。</span>
                            <a target="_blank" href="#"><img src="img/link.png" style="position: absolute;display: block;" width="30" height="30" alt=""></a>
                            <i></i>
                        </p>
                    </li>
                </div>
                
                
                <a href="javascript:" class="loadMeinvMOre" id="loadMeinvMOre" style="margin-bottom:15px;">加载更多</a>
            </div>

            <br>
            

            <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
            <script>
                window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')

            </script>
            <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
            <script type="text/javascript">
                // 瀑布流懒加载特效
                $(window).on("scroll", function() {
                    var sT = $(window).scrollTop() + $(window).innerHeight() + 100;
                    var minIndex = $(document).height();
                    if (minIndex < sT) {
                        page++;
                        loadImg()
                    }
                });

            </script>
</body>

</html>

    图片描述

    javascripthtml5css
    阅读 3.4k
    2 个回答
    得票最新
    头像
    kstd123
      1.2k1621
      $(window).on("scroll", function() {
                var sT = $(window).scrollTop() + $(window).innerHeight() + 100;
                var minIndex = $(document).height();
                if (minIndex < sT) {
                    page++;
                    loadImg()
                }
            });

      minIndex<ST是加载下一页的条件，loadImg(page)这个方法应该传一个当前页码吧

      头像
      papersnake
        12k31739

        https://www.wx2share.com/Item...

        我的这个页面正好是用Bootstrap用Masonry实现的，也实现了无限加载，你可以参靠一下，下面是核心代码，

        win.scroll(()=> {
            //无限加载
            if ($(document).height() - win.height() == win.scrollTop()) {
                console.log('end of page');
                this.loaddata();
            }
        });
        //初始化masonry
this.msnry = new Masonry( '.grid', {
              columnWidth: 15,
              itemSelector: '.grid-item',
              isAnimated: true,
              isFitWidth:true
        });
        loaddata(){
        let postparam={
            page:this.page,
            cats:this.options.cats,
            searchkey:this.options.searchkey,
            order:this.order,
            sortby:this.sortby,
        }
        let postdata={
            param:JSON.stringify(postparam),
        }
        
        if(this.finished) return;
        api.gethotTbkList(postdata).then((data)=>{
            console.log(data);
            if(data.items.length===0){
                this.finished=true;
                //sl.noData()
                return;
            }
            let lists=data.items.map((item)=>{
                return this.setItemLayout(item);
            });

            //添加内容到 masonry
            $('.grid').append(lists);
            this.msnry.appended(lists );
            this.page++;
            //sl.unLock();
        });
    }
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题