myWaterfall - jQuery瀑布流布局插件

Demo

http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/

Github

https://github.com/xjnotxj/myWaterfall

Usage

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script src="js/myWaterfall.js"></script>

HTML结构

在div.box-content中嵌入自定义的内容:

<div class="waterfall-container">

    <div class="box">

        <div class="box-content">

            <img src="http://cdn2.mhpbooks.com/2016/02/google.jpg">

            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p>

        </div>

    </div>

    …………

</div>

属性

    $(".waterfall-container").waterfall({

            //以下为默认缺省参数

            autoResize: true, // 当浏览器大小改变时是否自动调整

            offsetWidth: 5, // 每个元素之间的宽度距离(不加单位默认px)

            offsetHeight: 20, // 每个元素之间的高度距离(不加单位默认px)

            itemWidth: 200, // 每个元素的宽度，瀑布流高度是不限制的，所以只要宽度固定就可以了

            colNumber: 4, // 规定一行有几个元素，只有autoResize: false才生效

            colNumberMin: 2, // 规定一行最小有几个元素

            colNumberMax: 5, // 规定一行最大有几个元素

            resizeDelay: 0 // 自动调整延迟时间，一般情况下不需要设置，默认的就好了

    }); 

方法

init - 初始化 开启布局

$(".waterfall-container").waterfall('init');

等效于

$(".waterfall-container").waterfall({});

destroy - 关闭布局

$(".waterfall-container").waterfall('destroy');

layout - 手动刷新布局

$(".waterfall-container").waterfall('layout');