83 lines
2.9 KiB
JavaScript
83 lines
2.9 KiB
JavaScript
|
/*
|
|||
|
|
参数
|
|||
|
|
parent 放置瀑布流元素的容器，默认为 $("waterfall")
|
|||
|
|
container 放置瀑布流的父容器，默认为 $("threadlist")
|
|||
|
|
maxcolumn 最多多少列，默认为 0 不限制
|
|||
|
|
space 图片间距，默认为 10
|
|||
|
|
index 从第几张开始排列，默认为 0
|
|||
|
|
tag 瀑布流元素的 tagName，默认为 li
|
|||
|
|
columnsheight 存放列高度的数组
|
|||
|
|
|
|||
|
|
返回值
|
|||
|
|
index 当前瀑布流已经排列了多少个图片
|
|||
|
|
totalwidth 当前瀑布流的总宽度
|
|||
|
|
totalheight 当前瀑布流的总高度
|
|||
|
|
columnsheight 存放瀑布流列高的数组
|
|||
|
|
*/
|
|||
|
|
function waterfall(v) {
|
|||
|
|
var v = typeof(v) == "undefined" ? {} : v;
|
|||
|
|
var column = 1;
|
|||
|
|
var totalwidth = typeof(v.totalwidth) == "undefined" ? 0 : v.totalwidth;
|
|||
|
|
var totalheight = typeof(v.totalheight) == "undefined" ? 0 : v.totalheight;
|
|||
|
|
var parent = typeof(v.parent) == "undefined" ? $("waterfall") : v.parent;
|
|||
|
|
var container = typeof(v.container) == "undefined" ? $("threadlist") : v.container;
|
|||
|
|
var maxcolumn = typeof(v.maxcolumn) == "undefined" ? 0 : v.maxcolumn;
|
|||
|
|
var space = typeof(v.space) == "undefined" ? 10 : v.space;
|
|||
|
|
var index = typeof(v.index) == "undefined" ? 0 : v.index;
|
|||
|
|
var tag = typeof(v.tag) == "undefined" ? "li" : v.tag;
|
|||
|
|
|
|||
|
|
var columnsheight = typeof(v.columnsheight) == "undefined" ? [] : v.columnsheight;
|
|||
|
|
|
|||
|
|
function waterfallMin() {
|
|||
|
|
var min = 0;
|
|||
|
|
var index = 0;
|
|||
|
|
if(columnsheight.length > 0) {
|
|||
|
|
min = Math.min.apply({}, columnsheight);
|
|||
|
|
for(var i = 0, j = columnsheight.length; i < j; i++) {
|
|||
|
|
if(columnsheight[i] == min) {
|
|||
|
|
index = i;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {"value": min, "index": index};
|
|||
|
|
}
|
|||
|
|
function waterfallMax() {
|
|||
|
|
return Math.max.apply({}, columnsheight);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var mincolumn = {"value": 0, "index": 0};
|
|||
|
|
var totalelem = [];
|
|||
|
|
var singlewidth = 0;
|
|||
|
|
totalelem = parent.getElementsByTagName(tag);
|
|||
|
|
if(totalelem.length > 0) {
|
|||
|
|
column = Math.floor((container.offsetWidth - space) / (totalelem[0].offsetWidth + space));
|
|||
|
|
if(maxcolumn && column > maxcolumn) {
|
|||
|
|
column = maxcolumn;
|
|||
|
|
}
|
|||
|
|
if(!column) {
|
|||
|
|
column = 1;
|
|||
|
|
}
|
|||
|
|
if(columnsheight.length != column) {
|
|||
|
|
columnsheight = [];
|
|||
|
|
for(var i = 0; i < column; i++) {
|
|||
|
|
columnsheight[i] = 0;
|
|||
|
|
}
|
|||
|
|
index = 0;
|
|||
|
|
}
|
|||
|
|
singlewidth = totalelem[0].offsetWidth + space;
|
|||
|
|
totalwidth = singlewidth * column - space;
|
|||
|
|
for(var i = index, j = totalelem.length; i < j; i++) {
|
|||
|
|
mincolumn = waterfallMin();
|
|||
|
|
totalelem[i].style.position = "absolute";
|
|||
|
|
totalelem[i].style.left = singlewidth * mincolumn.index + "px";
|
|||
|
|
totalelem[i].style.top = mincolumn.value + "px";
|
|||
|
|
columnsheight[mincolumn.index] = columnsheight[mincolumn.index] + totalelem[i].offsetHeight + space;
|
|||
|
|
totalheight = Math.max(totalheight, waterfallMax());
|
|||
|
|
index++;
|
|||
|
|
}
|
|||
|
|
parent.style.height = totalheight + "px";
|
|||
|
|
parent.style.width = totalwidth + "px";
|
|||
|
|
}
|
|||
|
|
return {"index": index, "totalwidth": totalwidth, "totalheight": totalheight, "columnsheight" : columnsheight};
|
|||
|
|
}
|