mysql瀑布流布局插件_瀑布流JS插件

自己编写的一个ＪＳ瀑布流插件，里面有详细调用方法，代码易懂，新手学习，高手可路过。

/**

*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){