$7.49 .com domain with free InstantPage Website Builder$1.99 Web Hosting   捷飞网络官方淘宝店   Godaddy 优惠码
返回列表 发帖
分享到:




[Codes] 各种瀑布流效果的实现案例及讨论

瀑布流效果可谓是2012年互联网上非常流行的一种效果,像蘑菇街,拖拉网这种网站更是通篇的瀑布流。美丽说,花瓣等也都在用. 顺应潮流,作者在这里也和大家分享一个瀑布流效果,先贴下瀑布流效果图:
* g) m2 q( V0 b4 I$ s
: L- w0 a# y4 F  y

0 L' w7 ?1 l) e3 a% F方法一,js实现瀑布流排序# }# K, }% ?4 `5 ]9 O, L# q
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>js实现瀑布流排序</title>
  6. <style type="text/css">
  7. *{ margin:0; padding:0;}
  8. body { font:12px/1.8 Arial; color:#666;}
  9. h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
  10. .go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
  11. li{ list-style:none;}
  12. .wrapper {padding:50px;}

  13. </style>
  14. <link href="style.css" rel="stylesheet" type="text/css" />
  15. <body>
  16. <div class="wrapper">

  17. <div id="wrap" class="wrap active">
  18. <script language="javascript">
  19. var $id = function(o){ return document.getElementById(o) || o};
  20. for(i=0;i<30;i++){
  21.   var src = Math.floor(Math.random()*100);
  22.   if(src<10){src="0"+src}
  23.   if(src<100){src="0"+src}
  24.   var div = document.createElement("div");
  25.   div.className = "mode popup_in";
  26.   div.innerHTML =  "<p class='pic'><a href='#'><img src=/notfound.jpg style='height:"+"auto"+";'/></a></p><h3 class='tit'><span><a href='#'>"+src+".jpg</a></span></h3>";
  27.   div.style.top = 0;
  28.   div.style.left = 0;
  29.   document.getElementById("wrap").appendChild(div);
  30. }
  31. </script>
  32. </div>
  33. <script type="text/javascript">
  34. var warpWidth = 220; //格子宽度
  35. var margin = 14; //格子间距
  36. function postPosition(el,childTagName){
  37. var h = []; //记录每列的高度
  38. var box = el.getElementsByTagName(childTagName);
  39. var minH = box[0].offsetHeight,
  40. boxW = box[0].offsetWidth+margin;
  41. n = document.documentElement.offsetWidth / boxW | 0; //计算页面能排下多少Pin
  42. el.style.width = n * boxW - margin + "px";
  43. el.style.visibility = "visible";
  44. for(var i = 0; i < box.length; i++) {//排序算法,有待完善
  45.   boxh = box[i].offsetHeight; //获取每个Pin的高度
  46.   if(i < n) { //第一行特殊处理
  47.     h[i] = boxh;
  48.     box[i].style.top = 0 + 'px';
  49.     box[i].style.left = (i * boxW) + 'px';
  50.   }
  51.   else {
  52.     minH = Array.min(h); //取得各列累计高度最低的一列
  53.     minKey = getarraykey(h, minH);
  54.     h[minKey] += boxh+margin ; //加上新高度后更新高度值
  55.     el.style.height = h[minKey] +"px";
  56.     box[i].style.top = minH+margin + 'px';
  57.     box[i].style.left = (minKey * boxW) + 'px';
  58.   }
  59. }
  60. for(var i = 0; i < box.length; i++) {
  61.   box[i].style.visibility = "visible"; //定位完毕后显示新增节点
  62. }
  63. }
  64. Array.min=function(array)
  65. {
  66.     return Math.min.apply(Math,array);
  67. }
  68. /* 返回数组中某一值的对应项数 */
  69. function getarraykey(s, v) {
  70.         for(k in s) {
  71.                 if(s[k] == v) {
  72.                         return k;
  73.                 }
  74.         }
  75. }
  76. window.onload = function() {
  77. postPosition($id("wrap"),"div");
  78. };
  79. var re;
  80. window.onresize = function() {
  81. clearTimeout(re);
  82. re = setTimeout(resize,100);   
  83. };
  84. function resize(){
  85. $id("wrap").className = "wrap active";
  86. postPosition($id("wrap"),"div");
  87. }

  88. </script>
  89. <div id="aaa1" style="display:none;position: fixed;width:400px;height:200px;background:#000;color:#fff;top:30%;left:50%"></div>

  90. </div>

  91. </body>
  92. </html>
复制代码
: j1 d1 M) i/ F. ~
7 ]. i* J  x9 ^0 R' E4 ^9 `0 E
( }# t5 u- O$ J" h) ^! }# w- u7 ]) N

  \  q& C* J% V& y8 z( B. L. n) J实例二,js基于多栏列表瀑布流布局. K4 ^* k+ y# g: [6 r0 Z4 S3 ], O
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>js基于多栏列表瀑布流布局demo</title>
  6. <style type="text/css">
  7. *{ margin:0; padding:0;}
  8. body { font:12px/1.8 Arial; color:#666;}
  9. h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
  10. .go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
  11. li{ list-style:none;}
  12. .wrapper {padding:50px;}
  13. </style>
  14. <style>
  15. body {
  16. background-color: #eee;
  17. font-size: 84%;
  18. text-align: justify;
  19. }
  20. .column {
  21. display: inline-block;
  22. vertical-align: top;
  23. }
  24. .pic_a {
  25. display: block;
  26. padding: 5px;
  27. margin-bottom: 10px;
  28. border: 1px solid #ccc;
  29. background-color: #fff;
  30. text-decoration: none;
  31. }
  32. .pic_a img {
  33. display: block;
  34. margin: 0 auto 5px;
  35. border: 0;
  36. vertical-align: bottom;
  37. }
  38. .pic_a strong {
  39. color: #333;
  40. }
  41. </style>
  42. <body>
  43. <div class="wrapper">

  44. <div id="container"></div>
  45. <script>
  46. var waterFall = {
  47. container: document.getElementById("container"),
  48. columnNumber: 1,
  49. columnWidth: 210,
  50. // P_001.jpg ~ P_160.jpg
  51. rootImage: "http://cued.xunlei.com/demos/publ/img/",
  52. indexImage: 0,

  53. scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
  54. detectLeft: 0,

  55. loadFinish: false,

  56. // 返回固定格式的图片名
  57. getIndex: function() {
  58.   var index = this.indexImage;
  59.   if (index < 10) {
  60.    index = "00" + index;
  61.   } else if (index < 100) {
  62.    index = "0" + index;
  63.   }
  64.   return index;
  65. },

  66. // 是否滚动载入的检测
  67. appendDetect: function() {
  68.   var start = 0;
  69.   for (start; start < this.columnNumber; start++) {
  70.    var eleColumn = document.getElementById("waterFallColumn_" + start);
  71.    if (eleColumn && !this.loadFinish) {
  72.     if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {
  73.      this.append(eleColumn);
  74.     }
  75.    }   
  76.   }
  77.   
  78.   return this;
  79. },

  80. // 滚动载入
  81. append: function(column) {
  82.   this.indexImage += 1;
  83.   var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";
  84.   
  85.   // 图片尺寸
  86.   var aEle = document.createElement("a");
  87.   aEle.href = "###";
  88.   aEle.className = "pic_a";
  89.   aEle.innerHTML = '<img src="'+ imgUrl +'" /><strong>'+ index +'</strong>';
  90.   column.appendChild(aEle);
  91.   
  92.   if (index >= 160) {
  93.    //alert("图片加载光光了!");
  94.    this.loadFinish = true;
  95.   }
  96.   
  97.   return this;
  98. },

  99. // 页面加载初始创建
  100. create: function() {
  101.   this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
  102.   
  103.   var start = 0, htmlColumn = '', self = this;
  104.   for (start; start < this.columnNumber; start+=1) {
  105.    htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+
  106.     function() {
  107.      var html = '', i = 0;
  108.      for (i=0; i<5; i+=1) {
  109.       self.indexImage = start + self.columnNumber * i;
  110.       var index = self.getIndex();
  111.       html = html + '<a href="###" class="pic_a"><img src="'+ self.rootImage + "P_" + index +'.jpg" /><strong>'+ index +'</strong></a>';
  112.      }
  113.      return html;
  114.     }() +
  115.    '</span> ';
  116.   }
  117.   htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';
  118.   
  119.   this.container.innerHTML = htmlColumn;
  120.   
  121.   this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
  122.   return this;
  123. },

  124. refresh: function() {
  125.   var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
  126.   for (start; start < this.columnNumber; start+=1) {
  127.    var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|n|r|s)*?a>/gi);
  128.    if (arrColumn) {
  129.     maxLength = Math.max(maxLength, arrColumn.length);
  130.     // arrTemp是一个二维数组
  131.     arrTemp.push(arrColumn);
  132.    }
  133.   }
  134.   
  135.   // 需要重新排序
  136.   var lengthStart, arrStart;
  137.   for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {
  138.    for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {
  139.     if (arrTemp[arrStart][lengthStart]) {
  140.      arrHtml.push(arrTemp[arrStart][lengthStart]);
  141.     }
  142.    }
  143.   }
  144.   
  145.   
  146.   if (arrHtml && arrHtml.length !== 0) {
  147.    // 新栏个数  
  148.    this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
  149.    
  150.    // 计算每列的行数
  151.    // 向下取整
  152.    var line = Math.floor(arrHtml.length / this.columnNumber);
  153.    
  154.    // 重新组装HTML
  155.    var newStart = 0, htmlColumn = '', self = this;
  156.    for (newStart; newStart < this.columnNumber; newStart+=1) {
  157.     htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="width:'+ this.columnWidth +'px;">'+
  158.      function() {
  159.       var html = '', i = 0;
  160.       for (i=0; i<line; i+=1) {
  161.        html += arrHtml[newStart + self.columnNumber * i];
  162.       }
  163.       // 是否补足余数
  164.       html = html + (arrHtml[newStart + self.columnNumber * line] || '');
  165.       
  166.       return html;
  167.      }() +
  168.     '</span> ';
  169.    }
  170.    htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';
  171.   
  172.    this.container.innerHTML = htmlColumn;
  173.    
  174.    this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
  175.    
  176.    // 检测
  177.    this.appendDetect();
  178.   }
  179.   return this;
  180. },

  181. // 滚动加载
  182. scroll: function() {
  183.   var self = this;
  184.   window.onscroll = function() {
  185.    // 为提高性能,滚动前后距离大于100像素再处理
  186.    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  187.    if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {
  188.     self.scrollTop = scrollTop;
  189.     self.appendDetect();
  190.    }
  191.    
  192.   };
  193.   return this;
  194. },

  195. // 浏览器窗口大小变换
  196. resize: function() {
  197.   var self = this;
  198.   window.onresize = function() {
  199.    var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
  200.    if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
  201.     // 检测标签偏移异常,认为布局要改变
  202.     self.refresh();
  203.    }
  204.   };
  205.   return this;
  206. },
  207. init: function() {
  208.   if (this.container) {
  209.    this.create().scroll().resize();
  210.   }
  211. }
  212. };
  213. waterFall.init();
  214. </script>

  215. </div>
  216. </body>
  217. </html>
复制代码
* B8 L: V- @3 j
+ F3 W7 U( _1 b
参考:http://www.111cn.net/wy/js-ajax/52655.htm
& Z9 K+ ^+ T# [4 Q9 i/ S
1 A9 r3 H4 g9 a- b: R
4 ?2 V) ?, i  l& h3 z  j$ Y案例3:瀑布流布局——JS+绝对定位
  `: {# \; o: ~% d2 ]  x3 z; @% ~6 p! Z; z  }, Q

绝对定位方式的瀑布流布局:

一、布局

1、包围块框的容器:

<div id="main">    ... ...<div>
4 N8 G6 E$ p1 j$ r3 t" h( S

2、一个块框:

<div class="pin">    <div class="box">        <img src="./images/g (1).jpg"/>    </div></div>: Z  \8 W' M; J. A4 C( {8 o

3、初始化第一行/5个块框:

  1. .pin{
  2.         padding: 15px 0 0 15px;
  3.         float: left;}
  4.     .box{
  5.         padding: 10px;
  6.         border:1px solid #ccc;}
  7.     .box img{
  8.         width:192px;
  9.         height:auto;}
复制代码

# x- O! J/ z9 S0 v( Z7 ?


6 p3 H3 K. j& Z7 x) F

效果:


8 @, {- X) o( g% ~3 f6 x

' y3 _! T7 }8 z4 A9 w1 N# b/ W

  z, `2 [& S6 g5 [9 {

二、思路:

1、设置父级main的样式:水平居中。4 [" f$ l9 a+ d: J3 K
2、设置每个块框pin的样式:绝对定位。+ S7 q6 q6 \: C( r0 e8 Y( i
3、设置窗口滚动事件的监听函数:读取数据添加块框。

JS实现:

  1-①:获取父级oParent:! n3 C& j4 F* W' M2 ^) {/ ?
  1-②:创建函数getClassObj()-通过父级id和块框类名-获取包含块框的数组。

  1.     var oParent=document.getElementById('main');// 父级对象
  2.     var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
  3.     var num=Math.floor(document.documentElement.clientWidth/aPin[0].offsetWidth);//获取-每行中能容纳的块框个数-num【窗口宽度除以一个块框宽度】
  4.   oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//用cssText属性为父级main添加居中样式:定宽+自动水平外边距
复制代码
0 }  l! J2 Z8 U$ y" m1 B

  1. function getClassObj(parent,className){
  2.         var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
  3.         var pinS=[];//创建一个数组 用于存储类为className的元素
  4.         for (var i=0;i<obj.length;i++) {//遍历子集、判断类名、压入数组
  5.             if (obj[i].className==className)
  6.                 pinS.push(obj[i]);
  7.         };
  8.         return pinS;}
复制代码

4 q7 ^2 Q  I- F4 W, N6 q9 D


. J7 \9 Y* p  Q4 Z2 q2-①:创建数组pinHArr-用于存储每一列高度;

9 R6 Z2 n0 N7 X# E/ b9 k" |  2-②:for语句遍历每个块框aPin,将前num个块框赋值给数组pinHArr,对超出一行能容纳的块框数num的块框绝对定位。& m/ m1 A1 N: e! z
  2-③:用创建函数getminHIndex()-返回一个数组中的最小值

  1. var pinHArr=[];//用于存储 每列中的所有块框相加的高度【随着列数的不同此数组的length也随之改变】
  2.     for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
  3.         var pinH=aPin[i].offsetHeight;//获取数组aPin的第i个块框的可见宽offsetHeight
  4.         if(i<num){//
  5.             pinHArr[i]=pinH; //第一行中的num个块框aPin 先添加进数组pinHArr
  6.         }else{
  7.             var minH=Math.min.apply(null,pinHArr);//计算数组pinHArr中的最小值minH
  8.             var minHIndex=getminHIndex(pinHArr,minH);//通过创建的getminHIndex()-获取最小值minH在数组pinHArr中的索引minHIndex
  9.             aPin[i].style.position='absolute';//设置绝对位移
  10.             aPin[i].style.top=minH+'px';
  11.             aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';//数组 最小高元素的高 + 添加上的aPin[i]块框高
  12.             pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加块框后的列高
  13.         }
  14.     }
复制代码
. F7 y$ O: E4 h( E) ^! K. p1 a

  1. function getminHIndex(arr,minH){        for(var i in arr){
  2.             if(arr[i]==minH)return i;
  3.         }
  4.     }
复制代码
) H3 s* s  o  D5 @" R0 P

3:设置窗口滚动事件的监听函数:读取数据添加块框。

  1. var dataInt={'data':[{'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};//一个临时的数据对象
  2.     //下面定义窗口滚动事件监听函数
  3.     window.onscroll=function(){
  4.         if(checkscrollside()){
  5.         var oParent=document.getElementById('main');// 父级对象
  6.         for(var i=0;i<dataInt.data.length;i++){
  7.             var oPin=document.createElement('div'); //创建添加 元素节点pin
  8.             oPin.className='pin';                   //添加 类名 name属性
  9.             oParent.appendChild(oPin);              //创建添加 子节点box
  10.             var oBox=document.createElement('div');
  11.             oBox.className='box';
  12.             oPin.appendChild(oBox);
  13.             var oImg=document.createElement('img');//创建添加 子节点img
  14.             oImg.src='./images/'+dataInt.data[i].src;
  15.             oBox.appendChild(oImg);
  16.         }
  17.         waterfall('main','pin');//将①②封装成函数waterfall(),将添加的节点添加到添加和定位到文档中。
  18.         };
  19.     }

  20. function checkscrollside(){
  21.         var oParent=document.getElementById('main');
  22.         var aPin=getClassObj(oParent,'pin');
  23.         var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
  24.         var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
  25.         var documentH=document.documentElement.clientHeight;//窗口高度
  26.         return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数
  27.     }
复制代码

6 k0 t  |6 m3 d. E5 I

三、最终效果:


" C: s$ n0 R* }$ o! b

四、总结:此为让自己梳理一下思路,表达不太仔细连贯,仅供参考。

( J7 D' L/ d* G- C; ]. J


; v3 Z) |, \6 M7 P3 H1 w& H

五、完成后的html文件和js文件:

$ L7 b, O& R1 g% [% l

html:index.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta name="anchor" content="who care?" />
  6. <script type="text/javascript" src="waterfall.js"/></script>

  7. <title></title>
  8. <style type="text/css">
  9.     *{padding: 0;margin:0;}
  10.     #main{
  11.         position: relative;
  12.     }
  13.     .pin{
  14.         padding: 15px 0 0 15px;
  15.         float:left;
  16.     }
  17.     .box{
  18.         padding: 10px;
  19.         border:1px solid #ccc;
  20.         box-shadow: 0 0 6px #ccc;
  21.         border-radius: 5px;
  22.     }
  23.     .box img{
  24.         width:162px;
  25.         height:auto;
  26.     }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="main">
  31.     <div class="pin">
  32.         <div class="box">
  33.             <img src="./images/g (1).jpg"/>
  34.         </div>
  35.     </div>
  36.     <div class="pin">
  37.         <div class="box">
  38.             <img src="./images/g (2).jpg"/>
  39.         </div>
  40.     </div>
  41.     <div class="pin">
  42.         <div class="box">
  43.             <img src="./images/g (3).jpg"/>
  44.         </div>
  45.     </div>
  46.     <div class="pin">
  47.         <div class="box">
  48.             <img src="./images/g (4).jpg"/>
  49.         </div>
  50.     </div>
  51.     <div class="pin">
  52.         <div class="box">
  53.             <img src="./images/g (5).jpg"/>
  54.         </div>
  55.     </div>
  56. </div>
  57. </body>
  58. </html>
复制代码

6 T! Y& ]9 M( D' U. z6 o* e' p; C

js:waterfall.js

  1. window.onload=function(){
  2. waterfall('main','pin');
  3.     var dataInt={'data':[{'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};
  4.    
  5.     window.onscroll=function(){
  6.         if(checkscrollside()){
  7.         var oParent=document.getElementById('main');// 父级对象
  8.         for(var i=0;i<dataInt.data.length;i++){
  9.             var oPin=document.createElement('div'); //添加 元素节点
  10.             oPin.className='pin';                   //添加 类名 name属性
  11.             oParent.appendChild(oPin);              //添加 子节点
  12.             var oBox=document.createElement('div');
  13.             oBox.className='box';
  14.             oPin.appendChild(oBox);
  15.             var oImg=document.createElement('img');
  16.             oImg.src='./images/'+dataInt.data[i].src;
  17.             oBox.appendChild(oImg);
  18.         }
  19.         waterfall('main','pin');
  20.         };
  21.     }
  22.    
  23. }
  24. /*
  25.         parend 父级id
  26.         pin 元素id
  27. */
  28. function waterfall(parent,pin){
  29.     var oParent=document.getElementById(parent);// 父级对象
  30.     var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
  31.     var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
  32.     var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
  33.     oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式:定宽+自动水平外边距

  34.     var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
  35.     for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
  36.         var pinH=aPin[i].offsetHeight;
  37.         if(i<num){
  38.             pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
  39.         }else{
  40.             var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
  41.             var minHIndex=getminHIndex(pinHArr,minH);
  42.             aPin[i].style.position='absolute';//设置绝对位移
  43.             aPin[i].style.top=minH+'px';
  44.             aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
  45.             //数组 最小高元素的高 + 添加上的aPin[i]块框高
  46.             pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
  47.         }
  48.     }
  49. }
  50.     /****
  51.         *通过父级和子元素的class类 获取该同类子元素的数组
  52.         */
  53.     function getClassObj(parent,className){
  54.         var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
  55.         var pinS=[];//创建一个数组 用于收集子元素
  56.         for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
  57.             if (obj[i].className==className){
  58.                 pinS.push(obj[i]);
  59.             }
  60.         };
  61.         return pinS;
  62.     }
  63.     /****
  64.         *获取 pin高度 最小值的索引index
  65.         */
  66.     function getminHIndex(arr,minH){
  67.         for(var i in arr){
  68.             if(arr[i]==minH){
  69.                 return i;
  70.             }
  71.         }
  72.     }


  73.     function checkscrollside(){
  74.         var oParent=document.getElementById('main');
  75.         var aPin=getClassObj(oParent,'pin');
  76.         var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
  77.         var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
  78.         var documentH=document.documentElement.clientHeight;//页面高度
  79.         return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数
  80.     }
复制代码

: X! N* a  H5 b* d! G  a


/ i/ L( z/ f# v* x

& H) C; x$ w* r  h  k
查看更多参考:http://www.cnblogs.com/slowsoul/archive/2013/02/10/2909746.html8 F7 `1 z( Q: l5 T3 M' _& f
http://www.phpernote.com/php-template-framework/189.html: t# P  u4 z, F& ]) ^1 W8 z
www.baidu.com


返回列表
Namecheap
Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting
互联网安全