瀑布流JS插件
- WBOYOriginal
- 2016-06-07 11:44:271026browse
自己编写的一个ＪＳ瀑布流插件，里面有详细调用方法，代码易懂，新手学习，高手可路过。/**<br>
*waterfall.js文件<br>
* 瀑布流插件<br>
* @author Gardenia <fooying><br>
* window.onload = function(){<br>
* waterfallinit({:''})//配置参数<br>
* function success(data){}//添加节点函数，返回true <br>
* }<br>
*只需为瀑布流初始化函数 waterfallinit<br>
*配置一下函数<br>
*父类ID： parent:'main',<br>
*子类ID： pin:'pin',<br>
*判断ajax是否返回成功： successFn:success,<br>
*loading显示的图片地址 loadImgSrc:'./pic/load.gif',<br>
*没有更多数据显示的图片地址 endImg:'./pic/end.gif',<br>
*数据请求地址 requestUrl:'request.php',<br>
*每次请求的图片数，默认15 requestNum:15,<br>
*选择显示时风格,可以不设置默认为1 style:4,<br>
*设置loading图片的ID loadImgId:loadImg,<br>
*<br>
*<br>
*添加数据到html successFn函数<br>
function success(data){<br>
var oParent = document.getElementById('main'); //获取父节点<br>
for(i in data){<br>
var oPin = document.createElement('div');<br>
oPin.className = 'pin';<br>
oParent.appendChild(oPin);<br>
var oBox = document.createElement('div');<br>
oBox.className = 'box';<br>
oPin.appendChild(oBox);<br>
var oImg = document.createElement('img');<br>
oImg.src = './pic/'+data[i].src;<br>
oBox.appendChild(oImg);<br>
}<br>
<br>
return true;<br>
}<br>
}<br>
*<br>
*<br>
**/<br>
function waterfallinit(json){<br>
var parent = json.parent;<br>
var pin = json.pin;<br>
var successFn = json.successFn;<br>
var loadImgSrc = json.loadImgSrc;<br>
var endImgSrc = json.endImgSrc;<br>
var requestUrl = json.requestUrl;<br>
var requestNum = json.requestNum ? json.requestNum:10;<br>
var style = json.style;<br>
var loadImgId = json.loadImgId;<br>
var endImgId = json.endImgId;<br>
var oParent = document.getElementById(parent); //获取父节点<br>
/*最初加载*/<br>
ajaxRequest();<br>
<br>
/*触动滚动条循环加载*/<br>
var ajaxState = true;<br>
var page = 0;<br>
var endData = true; <br>
window.onscroll = function(){<br>
if(checkScrollSite() && ajaxState && endData){ <br>
page++;<br>
ajaxState = false;<br>
ajaxRequest();<br>
}<br>
}<br>
/*判断数据库数据返回数据是否为空*/<br>
function checkData(data){<br>
var oParent = document.getElementById(parent); //获取父节点<br>
var bool = false;<br>
if(data[0] != undefined){<br>
bool = true;<br>
}else{<br>
bool = false;<br>
}<br>
return bool;<br>
}<br>
/*ajax请求*/<br>
function ajaxRequest(){<br>
$.ajax({<br>
type:'GET',<br>
url:requestUrl,<br>
data:'page='+ page +'&requestNum=' + requestNum,<br>
dataType:'json',<br>
<br>
beforeSend:function(){<br>
if(page){<br>
<br>
var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组<br>
var lastPinH = aPin[aPin.length-1].offsetTop+<br>
Math.floor(aPin[aPin.length-1].offsetHeight);<br>
<br>
addImg(loadImgSrc,loadImgId);<br>
}<br>
},<br>
success:function(data){<br>
if(successFn(data)){<br>
waterfall(parent,pin,style);<br>
endData = checkData(data);<br>
if(!endData){<br>
addImg(endImgSrc,endImgId);<br>
}<br>
}<br>
<br>
},<br>
complete:function(data){<br>
if(page){<br>
oParent.removeChild(document.getElementById(loadImgId));<br>
} <br>
ajaxState = true;<br>
<br>
}<br>
})<br>
}<br>
<br>
/*校验滚动条位置*/<br>
function checkScrollSite(){<br>
//var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组<br>
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br>
var documentH = document.documentElement.clientHeight; <br>
return getLastH()<scrolltop></scrolltop>
}<br>
<br>
/*获取最末尾最短高度*/<br>
function getLastH(){<br>
var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组<br>
var lastPinH = aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight);<br>
return lastPinH;<br>
} <br>
<br>
/*增加图片标签，如：loading图标*/<br>
function addImg(src,id){<br>
var loadImg = document.createElement('img');<br>
loadImg.src = src;<br>
loadImg.id = id;<br>
oParent.appendChild(loadImg);<br>
loadImg.style.position = 'absolute';<br>
loadImg.style.top = getLastH() + 'px';<br>
loadImg.style.left = Math.floor(oParent.offsetWidth - loadImg.offsetWidth)/2 + 'px';<br>
<br>
}<br>
}<br>
<br>
/*<br>
*瀑布流排列<br>
*<br>
*/<br>
function waterfall(parent,pin,style){<br>
var oParent = document.getElementById(parent); //获取父节点<br>
var aPin = getClassObj(oParent,pin); //父节点下的class子节点数组<br>
//alert(aPin.length);<br>
var iPinW = aPin[0].offsetWidth; //获取固定宽度<br>
var num = Math.floor(oParent.offsetWidth/iPinW); //获取横向组数<br>
oParent.style.cssText = 'width:' + num*iPinW +'px;margin:0px auto;position:relative'; //父类具体宽度<br>
<br>
var compareAarr = [];<br>
var copareAll =[];<br>
//alert(aPin.length);<br>
for(var i=0;i<apin.length></apin.length>
if(i<num></num>
compareAarr[i] = aPin[i].offsetHeight;//获取每个子节点的高度<br>
}else{<br>
var minH = Math.min.apply('',compareAarr);//获取最小值<br>
var minKey = getMinKey(compareAarr,minH);//获取最小值的键值<br>
compareAarr[minKey] += aPin[i].offsetHeight;<br>
setmoveStyle(aPin[i],minH,aPin[minKey].offsetLeft,i,style);<br>
<br>
}<br>
}<br>
<br>
<br>
}<br>
<br>
/*<br>
*通过class选择元素 <br>
*/<br>
function getClassObj(parent,className){<br>
var obj = parent.getElementsByTagName('*');<br>
var result = [];<br>
for (var i = 0; i
if (obj[i].className == className) {<br>
result.push(obj[i]);<br>
}<br>
}<br>
return result;<br>
}<br>
<br>
<br>
/**设置运动风格<br>
*setmoveStyle<br>
*@param obj 对象<br>
*@param top 飞入布局 <br>
*@param left 飞入布局<br>
*@param index <br>
*@param style 飞入形势选择<br>
*1、从底下中间飞入<br>
*2、透明度渐现<br>
*3、从左右两边飞入<br>
*4、从各组下渐现飞入<br>
**/<br>
<br>
var startNum = 0;<br>
function setmoveStyle(obj,top,left,index,style){<br>
/*if(index
return;<br>
}*/<br>
obj.style.position = 'absolute';<br>
switch(style){<br>
case 1: //从底下中间飞入<br>
obj.style.top = getTotalH() + 'px';<br>
obj.style.left = Math.floor((document.documentElement.clientWidth-obj.offsetWidth)/2) + 'px';<br>
$(obj).stop().animate({<br>
top:top,<br>
left:left<br>
},600);<br>
break;<br>
case 2://渐现<br>
obj.style.top = top + 'px';<br>
obj.style.left = left + 'px';<br>
obj.style.apacity = 0;<br>
obj.style.filter = 'alpha(opacity=0)';<br>
$(obj).stop().animate({<br>
opacity:1,<br>
},1000);<br>
break;<br>
case 3:<br>
obj.style.top = getTotalH() + 'px';<br>
<br>
if(index % 2){<br>
obj.style.left = -obj.offsetWidth + 'px';<br>
}else{<br>
obj.style.left = document.documentElement.clientWidth + 'px';<br>
<br>
}<br>
$(obj).stop().animate({<br>
top:top,<br>
left:left<br>
},1000);<br>
break;<br>
case 4:<br>
obj.style.top = getTotalH() + 'px';<br>
obj.style.left = left +'px';<br>
$(obj).stop().animate({<br>
top:top,<br>
left:left<br>
},1600);<br>
break;<br>
<br>
<br>
}<br>
//更新索引<br>
startNum = index;<br>
}<br>
<br>
<br>
/*获取滚动条的高度,总高度*/<br>
function getTotalH(){<br>
return document.documentElement.scrollHeight || document.body.scrollHeight; <br>
<br>
}<br>
/** <br>
*获取图片数组最小值的键值<br>
*<br>
*/<br>
function getMinKey(arr,minH){<br>
for (key in arr) {<br>
if(arr[key] == minH){<br>
return key;<br>
}<br>
}<br>
}<br>
<br>
/*先图片返回数据从而固定布局，一般不用*/<br>
function callBack(w,h,imgObj){<br>
//alert(w+':'+h);<br>
imgObj.style.width = 205 + 'px';<br>
var scale = w/205;<br>
imgObj.style.height = Math.floor(h/scale)+ 'px';<br>
}<br>
/*先返回数据固定好布局后，图像加载*/<br>
function loadImg(url,fn,imgObj){ <br>
var img = new Image();<br>
img.src = url;<br>
if(img.complete){<br>
//alert(img.width);<br>
fn(img.width,img.height,imgObj);<br>
}else{<br>
img.onload = function(){<br>
fn(img.width,img.height,imgObj);<br>
}<br>
}<br>
}</fooying>主页文件：index.htmlnbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
<br>
<br>
<script></script><br>
<meta>
<br>
<title>瀑布流第一课</title>
<br>
<style><br />
#maina {<br />
width: 1100px;<br />
}<br />
#maina .pina{<br />
width: 225px;<br />
height: auto;<br />
padding: 15px 0px 0px 15px;<br />
float: left;<br />
}<br />
#maina .pina .box{<br />
width: 205px;<br />
height: auto;<br />
padding: 10px;<br />
background: #fff;<br />
border: 1px solid #ccc;<br />
box-shadow: 0px 0px 6px #ccc;<br />
border-radius: 5px;<br />
}<br />
#maina .pina .box img{<br />
width: 205px;<br />
}<br />
<br />
</style>
<br>
<br>
<script></script><br>
<script><br />
window.onload = function(){<br />
waterfallinit({<br />
parent:'maina',<br />
pin:'pina',<br />
successFn:success,<br />
loadImgSrc:'./pic/load.gif',<br />
endImgSrc:'./pic/end.jpg',<br />
requestUrl:'request.php',<br />
requestNum:5,<br />
style:2,<br />
loadImgId:'loadImg',<br />
endImgId:'endImg',<br />
<br />
})<br />
<br />
function success(data){<br />
var oParent = document.getElementById('maina'); //获取父节点<br />
for(i in data){<br />
var oPin = document.createElement('div');<br />
oPin.className = 'pina';<br />
oParent.appendChild(oPin);<br />
var oBox = document.createElement('div');<br />
oBox.className = 'box';<br />
oPin.appendChild(oBox);<br />
var oImg = document.createElement('img');<br />
oImg.src = './pic/'+data[i].src;<br />
oBox.appendChild(oImg);<br />
}<br />
<br />
return true;<br />
}<br />
}<br />
<br />
</script><br>
<br>
<br>
<div>
<br>
<br>
</div>
<br>
<br>
<br>
请求文件：request.php<?php <br />
header('Content-type:text/html;charset=utf-8');<br>
$mysql = mysql_connect('localhost','root','');<br>
mysql_query('set names utf8',$mysql);<br>
mysql_select_db('waterfall',$mysql);<br>
$page = isset($_GET['page'])?(int)$_GET['page']:0;<br>
$num = isset($_GET['requestNum'])?(int)$_GET['requestNum']:5;<br>
$startNum = $page*$num;<br>
$rows = mysql_query('select * from demo limit '.$startNum.','.$num.'');<br>
$data = array();<br>
while($row = mysql_fetch_assoc($rows)){<br>
$data[] = $row;<br>
}<br>
echo json_encode($data);<br>
?>图片实例：
http://huaban.com/pins/93310215
数据库waterfall创建代码：
--
-- 表的结构 `demo`
--CREATE TABLE IF NOT EXISTS `demo` (<br>
`id` int(10) NOT NULL AUTO_INCREMENT,<br>
`title` char(15) COLLATE utf8_bin NOT NULL,<br>
`src` char(13) COLLATE utf8_bin NOT NULL,<br>
`time` int(13) NOT NULL,<br>
PRIMARY KEY (`id`)<br>
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=1;
AD：真正免费，域名+虚机+企业邮箱=0元