美美的瀑布流效果 你会吗?

  过了“圣诞节”，一切回归自然，兴奋，激动地心情过后，还有什么?

                -----------------无疑，（代码陪着我）。。

今天忽然看一个瀑布流的效果，和大家分享一下！嘻嘻。。

1、html 代码

<div class="box">
        <div class="pics"></div>
    </div>

2、css 样式（记得找一个公共样式的插件哦！）

<style>
        .box {
        width:845px;
        margin:0 auto;
        background:#fcf5f5;
        padding-left:5px;
        }
        .pics {
            position:relative;
        }
        .pics div {
            width:194px;
            background:#EEE;
            border:1px #DDD solid;
            padding:5px;
            margin:5px 5px 0 0;
            float:left;
        }
    </style>

3、接下来要引入三个javascript 文件（如图片所示）

注：jquery.1.9.0.min.js   是一个公共插件，自己下载引入一个即可，

（1）common.js

        $(document).ready(function () {
            var arr = [0, 0, 0, 0];
            var $boxes = $(createBoxs(10));
            $boxes.imagesLoaded(function () {
                for (var i = 0, j = $boxes.length; i < j;i++){
                    var minNum = Math.min.apply(Math, arr),
                        minIndex = arr.indexOf(minNum);
                    $boxes.eq(i).animate({ left: minIndex * 211, top: minNum }, 1000);
                    arr[minIndex] += $boxes.eq(i).outerHeight(true);
                    var maxNum = Math.max.apply(Math, arr);
                    $('.box').height(maxNum);
                }
            })
            function createBoxs(num) {
                var boxArr = [];
                for (var i = 0; i < num ; i++) {
                    var conIndex = Math.floor(Math.random() * 19);
                    var maxNum = Math.max.apply(Math, arr);
                    var $box = $("<div>", {
                        html: "<img src='images/p_0" + conIndex + ".jpg' />",
                        css: { position: "absolute", left:340, top:maxNum}
                    }).appendTo(".pics");
                    boxArr.push($box[0]);
                }
                return boxArr;
            }
            $(window).scroll(function () {
                var scrl = $(document).height() - $(window).height() - $(window).scrollTop();
                if (scrl < 50) {
                    var $boxes = $(createBoxs(5));
                    $boxes.imagesLoaded(function () {
                        for (var i = 0, j = $boxes.length; i < j; i++) {
                            var minNum = Math.min.apply(Math, arr),
                                minIndex = arr.indexOf(minNum);
                            $boxes.eq(i).animate({ left: minIndex * 211, top: minNum }, 1000);
                            arr[minIndex] += $boxes.eq(i).outerHeight(true);
                            var maxNum = Math.max.apply(Math, arr);
                            $('.box').height(maxNum);
                        }
                    })
                    
                    $(window).scrollTop($(document).height() - 100 - $(window).height());
                }
            })
        })

 

(2)IndexOf.js

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement /*, fromIndex */) {
        if (this == null) {
            throw new TypeError();
        }
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) {
            return -1;
        }
        var n = 0;
        if (arguments.length > 1) {
            n = Number(arguments[1]);
            if (n != n) { // shortcut for verifying if it's NaN
                n = 0;
            } else if (n != 0 && n != Infinity && n != -Infinity) {
                n = (n > 0 || -1) * Math.floor(Math.abs(n));
            }
        }
        if (n >= len) {
            return -1;
        }
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) {
            if (k in t && t[k] === searchElement) {
                return k;
            }
        }
        return -1;
    }
}

 

(3)jqueryImageloaded.js

$.fn.imagesLoaded = function (callback) {//定义一个imagesLoaded的函数且接受callback参数
    var $this = this,
        $images = $this.find('img').add($this.filter('img')),//找出当前所有img标签，且含有img标签的元素
        len = $images.length,//获取当前所有img标签的长度
        blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==',//将图片转为16进制路劲
        loaded = [];//定义一个名为loaded空数组

    function triggerCallback() {//定义一个tiggerCallback函数，回调本函数用Call方法替代以前的$this,$images
        callback.call($this, $images);
    }

    function imgLoaded(event) {//定义一个imgLoaded函数,且使用event事件
        var img = event.target;//定义一个名为img的event对象
        if (img.src !== blank && $.inArray(img, loaded) === -1) {//???????????????????????????????????
            loaded.push(img);//将img加入loaded数组中
            if (--len <= 0) {//如果--len的值<=0 
                setTimeout(triggerCallback);//用定时器执行triggerCallback
                $images.unbind('.imagesLoaded', imgLoaded);//给$images解除imagesLoaded
            }
        }
    }

    // if no images, trigger immediately
    if (!len) {//如果len的值是false
        triggerCallback();//调用tiggerCallback函数
    }

    $images.bind('load.imagesLoaded error.imagesLoaded', imgLoaded).each(function () { //给每个$images绑定load.imagesLoaded error.imagesLoaded'和imgLoaded
        // cached images don't fire load sometimes, so we reset src.
        var src = this.src;//将当前路径赋给src变量
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = blank;//析释当前图片路径
        this.src = src;//将src转赋给this.src
    });

    return $this;
};

 

注：图片是可以自己找的哦！ 找一些美美的图片用代码实现成加载的效果！