首頁 >php教程 >php手册 >瀑布流JS插件

瀑布流JS插件

WBOY
WBOY原創
2016-06-07 11:44:271050瀏覽

自己编写的一个JS瀑布流插件,里面有详细调用方法,代码易懂,新手学习,高手可路过。
/**<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元

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn