自己編寫的一個ＪＳ瀑布流插件，里面有詳細調用方法，代碼易懂，新手學習，高手可路過。

/**

*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?<=?startNum){

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.htmlhtml?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

瀑布流第一課

#maina?{

width:?1100px;

}

#maina?.pina{

width:?225px;

height:?auto;

padding:?15px?0px?0px?15px;

float:?left;

}

#maina?.pina?.box{

width:?205px;

height:?auto;

padding:?10px;

background:?#fff;

border:?1px?solid?#ccc;

box-shadow:?0px?0px?6px?#ccc;

border-radius:?5px;

}

#maina?.pina?.box?img{

width:?205px;

}

window.onload?=?function(){

waterfallinit({

parent:'maina',

pin:'pina',

successFn:success,

loadImgSrc:'./pic/load.gif',

endImgSrc:'./pic/end.jpg',

requestUrl:'request.php',

requestNum:5,

style:2,

loadImgId:'loadImg',

endImgId:'endImg',

})

function?success(data){

var?oParent?=?document.getElementById('maina');?//獲取父節點

for(i?in?data){

var?oPin?=?document.createElement('div');

oPin.className?=?'pina';

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;

}

}

請求文件：request.php<?php

header('Content-type:text/html;charset=utf-8');

$mysql?=?mysql_connect('localhost','root','');

mysql_query('set?names?utf8',$mysql);

mysql_select_db('waterfall',$mysql);

$page?=?isset($_GET['page'])?(int)$_GET['page']:0;

$num?=?isset($_GET['requestNum'])?(int)$_GET['requestNum']:5;

$startNum?=?$page*$num;

$rows?=?mysql_query('select?*?from?demo?limit?'.$startNum.','.$num.'');

$data?=?array();

while($row?=?mysql_fetch_assoc($rows)){

$data[]?=?$row;

}

echo?json_encode($data);

?>圖片實例：

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;

總結

以上是生活随笔為你收集整理的mysql瀑布流布局插件_瀑布流JS插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。