masonry.js + colcade.js + infinite-scroll.js 实现无尽加载瀑布流图片列表页面模板 - 踏得网

Infinite Scroll waterfall images

h5, template, gallery, colcade

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2648
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js'></script>
<script src='https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js'></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
<script src="https://unpkg.com/colcade@0/colcade.js"></script>
<h1>Infinite Scroll - Colcade</h1>

<div class="grid">
    <div class="grid__column">
        <div class="grid__item grid__item--height2"></div>
        <div class="grid__item">
            <img src="/uploads/161001/normal1.jpg" alt="orange tree" />
        </div>
        <div class="grid__item grid__item--height3"></div>
        <div class="grid__item grid__item--height1"></div>
        <div class="grid__item grid__item--height2"></div>
        <div class="grid__item">
            <img src="/uploads/161001/normal2.jpg" alt="look out" />
        </div>

<div class="grid__item grid__item--height1"></div>
        <div class="grid__item grid__item--height3"></div>
        <div class="grid__item grid__item--height1"></div>
        <div class="grid__item grid__item--height3"></div>
        <div class="grid__item grid__item--height1"></div>
        <div class="grid__item grid__item--height1"></div>
        <div class="grid__item">
            <img src="/uploads/161001/normal3.jpg" alt="rasberries" />
        </div>
        <div class="grid__item grid__item--height2"></div>
        <div class="grid__item grid__item--height2"></div>
        <div class="grid__item grid__item--height3"></div>
        <div class="grid__item grid__item--height1"></div>
        <div class="grid__item grid__item--height2"></div>
    </div>
    <div class="grid__column"></div>
    <div class="grid__column"></div>
</div>

<div class="page-load-status">
    <div class="loader-ellips infinite-scroll-request">
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
        <span class="loader-ellips__dot"></span>
    </div>
    <p class="infinite-scroll-last">End of content</p>
    <p class="infinite-scroll-error">No more pages to load</p>
</div>