Skip to content

一个流式图片布局,支持横向和纵向布局

License

Notifications You must be signed in to change notification settings

miiiku/waterfall

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fall

一个简易的懒加载瀑布流

Travis (.org) License Language

纵向布局

v

横向布局

h

使用1(根据数据渲染,适用于ajax请求之类)

HTML

<!-- 瀑布流容器 -->
<div class="fall-box"></div>

<!-- 引入JS -->
<script src="waterfall.min.js"></script>

JS

    var images = [
        { url: "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1788.jpg" },
        { url: "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1795.jpg" },
        { url: "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1789.jpg" },
        { url: "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1453.jpg" },
        { url: "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1597.jpg" },
        { url: "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1206.jpg" },
        { url: "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1108.jpg" },
    ]

    var images = [
        "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1788.jpg",
        "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1795.jpg",
        "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1789.jpg",
        "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1453.jpg",
        "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1597.jpg",
        "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1206.jpg",
        "https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1108.jpg",
    ]

    window.onload = function () {
        waterfall(".fall-box", { datas: images })
    }

使用2(根据html标签渲染,适用于服务端渲染页面)

HTML

<!-- 瀑布流容器 -->
<div class="fall-box">
    <!-- 图片内容 -->
    <div class="fall-item">
        <img data-src="https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1788.jpg">
    </div>
    <div class="fall-item">
        <img data-src="https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1795.jpg">
    </div>
    <div class="fall-item">
        <img data-src="https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1789.jpg">
    </div>
    <div class="fall-item">
        <img data-src="https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1453.jpg">
    </div>
    <div class="fall-item">
        <img data-src="https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1597.jpg">
    </div>
    <div class="fall-item">
        <img data-src="https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1206.jpg">
    </div>
    <div class="fall-item">
        <img data-src="https://qiniu.miiiku.xyz/attach/5b62b3a1db54f8076bb387c7/IMG_1108.jpg">
    </div>
</div>

<!-- 引入JS -->
<script src="waterfall.min.js"></script>

JS

    window.onload = function() {
        waterfall(".fall-box")
    }

options

    {
        direction   : String,       // 布局模式(v,h)
        datas       : Array,        // 图片的数据 默认: null
        baseWidth   : Number,       // 图片的基准宽度 默认: 250(垂直布局)
        baseHeight  : Number,       // 图片的基准高度 默认: 260(水平布局)
        spacing     : Number,       // 间距 默认: 10
        accuracy    : Number,       // 精度 默认: 2
        rowClass    : String,       // 一行的className(水平布局)
        itemClass   : String,       // 单张图的className(垂直布局/水平布局)
    }

LICENSE

MIT ©️ miiiku

About

一个流式图片布局,支持横向和纵向布局

Topics

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published