瀑布流，纵向

/*
瀑布流封装
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
= lineArrBf
;
}
//重铺
liList = $("li[id^='grid_" + index + "_']");
for (n = 0, len = liList.length; n < len; n++) {
fixLi(liList
);
}
}
}
} 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 "";
}
}