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

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

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

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

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;};

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