瀑布流，纵向

/*
瀑布流封装
   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 "";
    }
}