瀑布流，縱向

/*
瀑布流封裝
   2016.4.27 by WJ

@param containerId  容器ID
@param nline        列數
@param nWidth       容器寬度
@param nBoxWidth    元素實際所佔寬度
@param nMarginLeft  元素的margin
@param nMarginTop   元素的margin
@param getData      function
@param onFinish     function
*/
function waterfall(containerId, nline, nWidth, nBoxWidth, nMarginLeft, nMarginTop, getData, onFinish) {

    var line = nline || 4,
        width = nWidth || 1180,
        boxWidth = nBoxWidth || 295,
        marginLeft = nMarginLeft || 0,
        marginTop = nMarginTop || 0;

    var i;
    var cache = [];       //緩存當前讀到的數據
    var imgCache = []     //緩存圖片數據
    var index = 1;        //第幾組數據調用(頁碼)
    var flag = true;      //是否可讀取數據（避免重複讀取）

    //統計每列的當前高度
    var lineArr = [];
    var lineArrBf = []; //備份
    for (i = 0; i < line; i++) {
        lineArr.push(0);
        lineArrBf.push(0);
    }

    //最大值
    Array.prototype.max = function () {
        return Math.max.apply({}, this)
    }
    //最小值
    Array.prototype.min = function () {
        return Math.min.apply({}, this)
    }

    //ul容器
    var container = document.getElementById(containerId);
    container.style.position = "relative";


    //緩存圖片(將圖片有序地加入數組，並觸發圖片加載)
    var printFall = function () {
        imgCache = []
        for (i = 0; i < cache.length; i++) {
            var imagethis = new Image();
            imagethis.onload = function () { chn(this); }
            imagethis.onerror = function () { chn(this); }
            imagethis.src = cache[i].c;
            imgCache.push(imagethis)
        }
    }

    //每張圖片加載完成後都會觸發本事件（輸出元素到頁面上）
    var chn = function (img) {
        var k = 0, j = 0, i = 0, m = 0, n = 0,
            temp;
        var li, liId, thisbox, liList, thisLiid, thisliIdNum;

        //標記本條數據的圖片已加載完成
        for (k = 0; k < cache.length; k++) {
            if (imgCache[k] === img) {
                temp = cache[k];
                temp = { "a": 1, "b": temp.b, "c": temp.c }
                cache[k] = temp;
                break;
            }
        }

        var thisflag = true;

        for (i = 0; i < cache.length; i++) {
            if (cache[i].a == 1) {
                li = document.createElement("li");
                liId = "grid_" + index + "_" + i
                li.id = liId;
                li.innerHTML = cache[i].b;
                thisbox = document.getElementById(liId);
                if (!thisbox) {

                    //讀取本組的全部已輸出的元素
                    liList = $("li[id^='grid_" + index + "_']");
                    for (m = 0, len = liList.length; m < len; m++) {
                        thisLiid = liList[m].id;
                        thisliIdNum = parseInt(thisLiid.split('_')[2]);
                        if (thisliIdNum > i) {
                            break;
                        }
                    }
                    if (m >= liList.length) {
                        container.appendChild(li);
                        fixLi(li);
                    } else {
                        //有序地插入隊中
                        container.insertBefore(li, liList[m]);
                        //調整本組元素的定位
                        //復位
                        for (n = 0; n < line; n++) {
                            lineArr[n] = lineArrBf[n];
                        }
                        //重鋪
                        liList = $("li[id^='grid_" + index + "_']");
                        for (n = 0, len = liList.length; n < len; n++) {
                            fixLi(liList[n]);
                        }
                    }
                }
            } else {
                thisflag = false;
            }
        }

        //修改容器的高度
        var maxLine = lineArr.max();
        container.style.height = maxLine + 'px';

        if (thisflag && !flag) {
            //本組圖片已所有完成加載
            index++;
            cache = [];
            flag = true;
            onFinish();
        }
    }

    //調整元素位置
    var fixLi = function (li) {
        var minLine, targetLine, j;
        //獲取新元素的位置
        minLine = lineArr.min();//找到最短的一列的高度
        targetLine = 0;//確認最短列的數組下標
        for (j = 0; j < lineArr.length; j++) {
            if (minLine == lineArr[j]) {
                targetLine = j;
                break;
            }
        }
        //填入隊尾
        li.style.top = lineArr[targetLine] + 'px';
        li.style.position = "absolute";
        li.style.left = targetLine * boxWidth + targetLine * marginLeft + 'px';
        lineArr[targetLine] += li.offsetHeight + marginTop;//修改數組的值
    }

    //處理AJAX返回的數據
    var processData = function (data, getSrc, getHtml) {
        if (data.length == 0) {
            if ($("#" + containerId).html == "") {
                $("#" + containerId).html("內容正在採集中……"); return false;
            }
        }
        else {
            var html = ""
            var src = "";
            for (i = 0; i < line; i++) {
                lineArrBf[i] = lineArr[i];
            }
            for (var i = 0; i < data.length; i++) {
                src = getSrc(data[i]);
                html = getHtml(index, data[i], src);

                //a:0表示圖片未完成緩存
                cache.push({ "a": 0, "b": html, "c": src });
            }
            printFall();
        }
    }

    //滾動事件
    var myFunction = function () {
        if (flag) {
            var doc_height = $(document).height();
            //屏幕下遮擋的頁面高度
            var hBelow = doc_height - $(this).scrollTop() - $(this).height();
            var perc = hBelow / doc_height;

            //觸發加載數據的條件
            if (hBelow < 3000 || perc < 0.3) {
                flag = false;
                getData(index, processData);
            }
        }
    }

    return myFunction;
}

　　

//調取瀑布流
$(function () {
    //加載數據時執行的操做
    var getData = function (index, processData) {
        //圖片連接
        var getSrc = function (item) {
            return "/uploads/" + item.g_id + "/" + item.c_picurl1;
        }
        //li標籤內的內容拼接
        var getHtml = function (index, item, src) {
            var html = "";
            html += "<a href=\"/uploads/" + item.g_id + "/" + item.c_picurl2 + "\" class=\"fancyBox\">";
            html += "<img src=\"" + src + "\">";
            html += "<h3 title='" + item.c_info_title + "'>" + getLength(item.c_info_title, 15) + "</h3>";
            html += "</a>";
            return html
        }

        var para = {};
        para["index"] = index;
        para["kind"] = parameter.k.k;
        para["action"] = "list";

        $.ajax({
            type: "post",
            url: "cl/getCase.ashx",
            data: para,
            dataType: "json",
            success: function (data) {
                processData(data.Rows, getSrc, getHtml);
            },
            error: function (msg) {
                //alert(msg); 
            }
        });
    };

    //加載完成後執行的操做
    var onFinish = function () {
        $(".fancyBox").fancybox({
            type: 'image',
            openEffect: 'elastic',
            closeEffect: 'elastic',
            padding: 0,
            centerOnScroll: true,
            helpers: {
                title: {
                    type: 'float'
                }
            }
        });
    }

    var myfall = waterfall('coont', 3, 860, 274, 14, 20, getData, onFinish);
    $(window).bind("scroll", myfall);
    myfall();
});


function getLength(str, i) {
    var s = str.toString();
    if (s) {
        if (s.length > i) {
            return s.substring(0, i);
        } else {
            return s;
        }
    } else {
        return "";
    }
}