Skip to content
一个流式图片布局,支持横向和纵向布局
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
img
src
.gitignore
.travis.yml
LICENSE
README.md
gulpfile.js
package-lock.json
package.json

README.md

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

You can’t perform that action at this time.