美美的瀑布流效果 你會嗎?

  過了“聖誕節”，一切回歸自然，興奮，激動地心情過后，還有什么?

                -----------------無疑，（代碼陪着我）。。

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

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

 

注：圖片是可以自己找的哦！ 找一些美美的圖片用代碼實現成加載的效果！