myWaterfall

jQuery瀑布流布局插件

by q3011893

HTML

<div class="switch">
    <button>关闭瀑布流</button>
</div>
<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 class="box">
        <div class="box-content">
            <img src="https://www.google.com/landing/2step/images/why-need-img-2.png">
            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p>
        </div>
    </div>
    <div class="box">
        <div class="box-content">
            <img src="https://4.bp.blogspot.com/-Nyfdpymc_Lo/VkQw-nJ79mI/AAAAAAAARYg/6o9VeoTvu-I/s1600-r/logo_chrome.png"
            >
            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
    </div>
    <div class="box">
        <div class="box-content">
            <img src="http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660"
            >
            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
    </div>
    <div class="box">
        <div class="box-content">
            <img src="http://i1.sinaimg.cn/IT/2013/0320/U5385P2DT20130320080117.jpg">
            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
    </div>
    <div class="box">
        <div class="box-content">
            <img src="http://www.people.com.cn/mediafile/pic/20150906/81/15788599594280374761.jpg">
            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
    </div>

    <div class="box">
        <div class="box-content">
            <img src="http://www.kuqin.com/upimg/topic/google.jpg">
            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
    </div>
    <div class="box">
        <div class="box-content">
            <img src="http://www.xjp.cc/img.xjp.cc/2010/07/google-china.jpg">
            <p>谷歌公司成立于1998年9月4日，被公认为全球最大的搜索引擎。</p></div>
    </div>
    <div class="box">
        <div class="box-content">
            <img...

CSS

* {
        margin: 0;
        padding: 0;

    }

    .switch {
        text-align: center;
    }

    .switch button {
        height: 30px;
        width: 100px;
    }

    .waterfall-container {
    }

    .box {
        border: 1px dashed lightgray;
    }

    .box-content {
        border: 1px dashed brown;
    }

    .box-content img {
        width: 100%;
        border: 1px solid black;
        box-sizing: border-box;
    }

    .box-content p {
        font-size: 14px;
        box-sizing: border-box;
    }

JavaScript

(function ($) {

    //-----------------全局属性

    //储存选项
    var settings;
    //窗口改变的setouttim方法
    var st;

    //-----------------暴露接口
    var methods = {
        init: function (options) {

            settings = $.extend({
                container: this, // 父容器
                autoResize: true, // 当浏览器大小改变时是否自动调整
                offsetWidth: 5, // 每个元素之间的宽度距离(不加单位默认px)
                offsetHeight: 10, // 每个元素之间的高度距离(不加单位默认px)
                itemWidth: 260, // 每个元素的宽度，瀑布流高度是不限制的，所以只要宽度固定就可以了
                colNumber: 4, // 规定一行有几个元素，只有autoResize: false才生效
                colNumberMin: 2, // 规定一行最小有几个元素
                colNumberMax: 5, // 规定一行最大有几个元素
                resizeDelay: 0 // 自动调整延迟时间，一般情况下不需要设置，默认的就好了
            }, options);

            //参数验证
            if (typeof settings.autoResize !== 'boolean') {
                settings.autoResize = true;
            }
            if (isNaN(settings.offsetWidth) || settings.offsetWidth < 0) {
                settings.offsetWidth = 5;
            }
            if (isNaN(settings.offsetHeight) || settings.offsetHeight < 0) {
                settings.offsetHeight = 10;
            }
            if (isNaN(settings.itemWidth) || settings.itemWidth < 0) {
                settings.itemWidth = 10;
            }
            if (isNaN(settings.colNumber) || settings.colNumber < 0) {
                settings.colNumber = 4;
            }
            if (isNaN(settings.colNumberMin) || settings.colNumberMin < 0) {
                settings.colNumberMin = 2;
            }
            if (isNaN(settings.colNumberMax) || settings.colNumberMax < 0) {
                settings.colNumberMax = 5;
            }
            if (isNaN(settings.resizeDelay) || settings.resizeDelay < 0) {
                settings.resizeDelay = 50;
            }

            //窗口改变触发重新布局
            if (settings.autoResize) {
                $(window).on("resize", windowChangeAutoLayout);
            }

            //初始化布局
           ...