自己编写的一个ｊｓ瀑布流插件，里面有详细调用方法，代码易懂，新手学习，高手可路过。
/**
*waterfall.js文件
* 瀑布流插件
* @author gardenia
* window.onload = function(){
* waterfallinit({:''})//配置参数
* function success(data){}//添加节点函数，返回true
* }
*只需为瀑布流初始化函数 waterfallinit
*配置一下函数
*父类id： parent:'main',
*子类id： pin:'pin',
*判断ajax是否返回成功： successfn:success,
*loading显示的图片地址 loadimgsrc:'./pic/load.gif',
*没有更多数据显示的图片地址 endimg:'./pic/end.gif',
*数据请求地址 requesturl:'request.php',
*每次请求的图片数，默认15 requestnum:15,
*选择显示时风格,可以不设置默认为1 style:4,
*设置loading图片的id loadimgid:loadimg,
*
*
*添加数据到html successfn函数
function success(data){
var oparent = document.getelementbyid('main'); //获取父节点
for(i in data){
var opin = document.createelement('div');
opin.classname = 'pin';
oparent.appendchild(opin);
var obox = document.createelement('div');
obox.classname = 'box';
opin.appendchild(obox);
var oimg = document.createelement('img');
oimg.src = './pic/'+data[i].src;
obox.appendchild(oimg);
}
return true;
}
}
*
*
**/
function waterfallinit(json){
var parent = json.parent;
var pin = json.pin;
var successfn = json.successfn;
var loadimgsrc = json.loadimgsrc;
var endimgsrc = json.endimgsrc;
var requesturl = json.requesturl;
var requestnum = json.requestnum ? json.requestnum:10;
var style = json.style;
var loadimgid = json.loadimgid;
var endimgid = json.endimgid;
var oparent = document.getelementbyid(parent); //获取父节点
/*最初加载*/
ajaxrequest();
/*触动滚动条循环加载*/
var ajaxstate = true;
var page = 0;
var enddata = true;
window.onscroll = function(){
if(checkscrollsite() && ajaxstate && enddata){
page++;
ajaxstate = false;
ajaxrequest();
}
}
/*判断数据库数据返回数据是否为空*/
function checkdata(data){
var oparent = document.getelementbyid(parent); //获取父节点
var bool = false;
if(data[0] != undefined){
bool = true;
}else{
bool = false;
}
return bool;
}
/*ajax请求*/
function ajaxrequest(){
$.ajax({
type:'get',
url:requesturl,
data:'page='+ page +'&requestnum=' + requestnum,
datatype:'json',
beforesend:function(){
if(page){
var apin = getclassobj(oparent,pin); //父节点下的class子节点数组
var lastpinh = apin[apin.length-1].offsettop+
math.floor(apin[apin.length-1].offsetheight);
addimg(loadimgsrc,loadimgid);
}
},
success:function(data){
if(successfn(data)){
waterfall(parent,pin,style);
enddata = checkdata(data);
if(!enddata){
addimg(endimgsrc,endimgid);
}
}
},
complete:function(data){
if(page){
oparent.removechild(document.getelementbyid(loadimgid));
}
ajaxstate = true;
}
})
}
/*校验滚动条位置*/
function checkscrollsite(){
//var apin = getclassobj(oparent,pin); //父节点下的class子节点数组
var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
var documenth = document.documentelement.clientheight;
return getlasth() }
/*获取最末尾最短高度*/
function getlasth(){
var apin = getclassobj(oparent,pin); //父节点下的class子节点数组
var lastpinh = apin[apin.length-1].offsettop+math.floor(apin[apin.length-1].offsetheight);
return lastpinh;
}
/*增加图片标签，如：loading图标*/
function addimg(src,id){
var loadimg = document.createelement('img');
loadimg.src = src;
loadimg.id = id;
oparent.appendchild(loadimg);
loadimg.style.position = 'absolute';
loadimg.style.top = getlasth() + 'px';
loadimg.style.left = math.floor(oparent.offsetwidth - loadimg.offsetwidth)/2 + 'px';
}
}
/*
*瀑布流排列
*
*/
function waterfall(parent,pin,style){
var oparent = document.getelementbyid(parent); //获取父节点
var apin = getclassobj(oparent,pin); //父节点下的class子节点数组
//alert(apin.length);
var ipinw = apin[0].offsetwidth; //获取固定宽度
var num = math.floor(oparent.offsetwidth/ipinw); //获取横向组数
oparent.style.csstext = 'width:' + num*ipinw +'px;margin:0px auto;position:relative'; //父类具体宽度
var compareaarr = [];
var copareall =[];
//alert(apin.length);
for(var i=0;i if(i compareaarr[i] = apin[i].offsetheight;//获取每个子节点的高度
}else{
var minh = math.min.apply('',compareaarr);//获取最小值
var minkey = getminkey(compareaarr,minh);//获取最小值的键值
compareaarr[minkey] += apin[i].offsetheight;
setmovestyle(apin[i],minh,apin[minkey].offsetleft,i,style);
}
}
}
/*
*通过class选择元素
*/
function getclassobj(parent,classname){
var obj = parent.getelementsbytagname('*');
var result = [];
for (var i = 0; i if (obj[i].classname == classname) {
result.push(obj[i]);
}
}
return result;
}
/**设置运动风格
*setmovestyle
*@param obj 对象
*@param top 飞入布局
*@param left 飞入布局
*@param index
*@param style 飞入形势选择
*1、从底下中间飞入
*2、透明度渐现
*3、从左右两边飞入
*4、从各组下渐现飞入
**/
var startnum = 0;
function setmovestyle(obj,top,left,index,style){
/*if(index return;
}*/
obj.style.position = 'absolute';
switch(style){
case 1: //从底下中间飞入
obj.style.top = gettotalh() + 'px';
obj.style.left = math.floor((document.documentelement.clientwidth-obj.offsetwidth)/2) + 'px';
$(obj).stop().animate({
top:top,
left:left
},600);
break;
case 2://渐现
obj.style.top = top + 'px';
obj.style.left = left + 'px';
obj.style.apacity = 0;
obj.style.filter = 'alpha(opacity=0)';
$(obj).stop().animate({
opacity:1,
},1000);
break;
case 3:
obj.style.top = gettotalh() + 'px';
if(index % 2){
obj.style.left = -obj.offsetwidth + 'px';
}else{
obj.style.left = document.documentelement.clientwidth + 'px';
}
$(obj).stop().animate({
top:top,
left:left
},1000);
break;
case 4:
obj.style.top = gettotalh() + 'px';
obj.style.left = left +'px';
$(obj).stop().animate({
top:top,
left:left
},1600);
break;
}
//更新索引
startnum = index;
}
/*获取滚动条的高度,总高度*/
function gettotalh(){
return document.documentelement.scrollheight || document.body.scrollheight;
}
/**
*获取图片数组最小值的键值
*
*/
function getminkey(arr,minh){
for (key in arr) {
if(arr[key] == minh){
return key;
}
}
}
/*先图片返回数据从而固定布局，一般不用*/
function callback(w,h,imgobj){
//alert(w+':'+h);
imgobj.style.width = 205 + 'px';
var scale = w/205;
imgobj.style.height = math.floor(h/scale)+ 'px';
}
/*先返回数据固定好布局后，图像加载*/
function loadimg(url,fn,imgobj){
var img = new image();
img.src = url;
if(img.complete){
//alert(img.width);
fn(img.width,img.height,imgobj);
}else{
img.onload = function(){
fn(img.width,img.height,imgobj);
}
}
}主页文件：index.htmlnbsp;html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
瀑布流第一课
请求文件：request.php图片实例：
http://huaban.com/pins/93310215
数据库waterfall创建代码：
--
-- 表的结构 `demo`
--create table if not exists `demo` (
`id` int(10) not null auto_increment,
`title` char(15) collate utf8_bin not null,
`src` char(13) collate utf8_bin not null,
`time` int(13) not null,
primary key (`id`)
) engine=innodb default charset=utf8 collate=utf8_bin auto_increment=1;
ad：真正免费，域名+虚机+企业邮箱=0元