网页瀑布流布局实现方法及功能扩展

Web前端评论1K阅读模式

这种布局中虽然每个Pin的高度不尽相同，但是他们的宽度都是一样的。

那么假如，很邪恶的提出一个要求，宽度也不尽相同，只是说宽高都按比例成倍增加，那还怎么排列呢？呵呵，如下：

  1. <!doctype html>  
  2.   <html>  
  3.   <head>  
  4.   <meta charset="UTF-8" />  
  5.   <title>宽高尺寸不同的格子堆砌</title>  
  6.   <style>  
  7.   body{background:#F6F7F8;}  
  8.   .myWidget{position:relative;overflow:hidden;zoom:1;margin:0 auto;}  
  9.   .MBox{float:left;}  
  10.   .widgetBox{position:relative;overflow:hidden;zoom:1;width:186px;height:166px;margin:6px;border:1px solid #E1E1E3;  
  11. border-radius:10px;  
  12. -moz-border-radius:10px;  
  13. -webkit-border-radius:10px;  
  14. box-shadow:2px 3px 5px #d3d3d3;  
  15. -moz-box-shadow:2px 3px 5px #d3d3d3;  
  16. -webkit-box-shadow:2px 3px 5px #d3d3d3;  
  17. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fefefe, endColorstr=#e0e0e2);  
  18. background: linear-gradient(top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);  
  19. background: -moz-linear-gradient(top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);  
  20. background: -webkit-gradient(linear, 0 0, 0 100% , from(#fefefe),to(#e0e0e2));  
  21. background: -webkit-linear-gradient(0 0, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);  
  22. }  
  23. </style>  
  24. <script>  
  25. var $id = function(o){ return document.getElementById(o) || o ;};  
  26. var getElementsByClassName = function(className,parent,tag) {  
  27. parent = parent || document;  
  28. if(parent.getElementsByClassName){  
  29. return  parent.getElementsByClassName(className)  
  30. }else{  
  31. tag = tag || '*';  
  32. var returnElements = []  
  33. var els =  parent.getElementsByTagName(tag);  
  34. className = className.replace(/\-/g, "\\-");  
  35. var pattern = new RegExp("(^|\\s)"+className+"(\\s|$)");  
  36. var i = 0;  
  37. while(i < els.length){  
  38. if (pattern.test(els[i].className) ) {  
  39. returnElements.push(els[i]);  
  40. }  
  41. i++;  
  42. }  
  43. return returnElements;  
  44. }  
  45. };  
  46. /* 格子排序 */  
  47. var box={};  
  48. box.gen={w:200,h:180};  
  49. box.init=function(el){  
  50. box.size=[]; //格子,[1,2]表示1X2的大格子  
  51. box.obj={};  
  52. box.oArray=[];  
  53. box.maxY=-1;  
  54. box.mbox = getElementsByClassName("MBox",el,'div');  
  55. box.row = document.documentElement.offsetWidth / box.gen.w >> 0;  //每行标准格数  
  56. el.style.width = box.row * box.gen.w + "px";  
  57. var i = 0 , nx, ny;  
  58. while( i < this.mbox.length){  
  59. if( getElementsByClassName("bigBox",this.mbox[i],'div').length > 0 ){  
  60. nx=Math.ceil(this.mbox[i].offsetWidth / this.gen.w);  
  61. nx=(nx > this.row) ? this.row : nx; //大小超出限制  
  62. ny=Math.ceil(this.mbox[i].offsetHeight / this.gen.h);  
  63. this.size.push([nx,ny]);  
  64. }else{  
  65. this.size.push(1);  
  66. }  
  67. i++;  
  68. }  
  69. box.sort(el);  
  70. };  
  71. box.setIfr=function(el){  //大格子初始化  
  72. var ifr = getElementsByClassName("bigBox",el,'div');;  
  73. if(ifr.length==0) return false;  
  74. var i = 0, nx, ny, theifr;  
  75. while(i < ifr.length){  
  76. theifr =  getElementsByClassName("innerBox",ifr[i],'div');  
  77. nx=Math.ceil(theifr[0].offsetWidth / this.gen.w); //bigBox横向占的块数  
  78. ny=Math.ceil(theifr[0].offsetHeight / this.gen.h);  
  79. ifr[i].style.width = nx*this.gen.w-14 + 'px' ;  
  80. ifr[i].style.height = ny*this.gen.h-14 + 'px' ;  
  81. i++;  
  82. }  
  83. };  
  84. box.sort=function(el){  
  85. var y=0, x=0, temp={x:Infinity, y:Infinity}, flag=Infinity, name;  
  86. for(var n=0; n < this.size.length ; n++){  
  87. if(flag == 0){  
  88. x=temp.x;  
  89. y=temp.y;  
  90. }  
  91. flag=flag-1;  
  92. if(x>box.row-1){ //换行  
  93. x=0;  
  94. y++;  
  95. }  
  96. name=x+'_'+y;  //对象属性名（反映占领的格子）  
  97. if(this.hasN(name)) {  //判断属性名是否存在  
  98. n--;  
  99. x++;  
  100. if(flag<Infinity) flag=flag+1;  
  101. continue;  
  102. }  
  103. if(!this.size[n].length){  //普通格子  
  104. this.obj[name]=[x,y];  //项值（反映坐标值）  
  105. x++;  
  106. }  
  107. else{  //大格子  
  108. if(this.over(x,y,n)) {  
  109. if(temp.y > y){  
  110. temp.y = y;  
  111. temp.x = x;  
  112. }  
  113. if(temp.y < Infinity){  
  114. flag=1;  
  115. }  
  116. n--;  
  117. x++;  
  118. continue;  
  119. }  
  120. this.obj[name]=[x,y];  
  121. this.apply(x,y,n);  
  122. x+=this.size[n][0];  
  123. }  
  124. if(flag==-1) {  
  125. flag =  Infinity;  
  126. temp.y = Infinity;  
  127. temp.x = Infinity;  
  128. }  
  129. var h=this.size[n][1]-1 || 0;  
  130. box.maxY=(box.maxY > y+h)? box.maxY : y+h;  
  131. }  
  132. for(var i in this.obj){  
  133. if(this.obj[i]===0 || !this.obj.hasOwnProperty(i)) continue;  
  134. this.oArray.push(this.obj[i]);  
  135. }  
  136. box.put(el);  
  137. };  
  138. box.hasN=function(n){  
  139. return n in this.obj;  
  140. };  
  141. box.over=function(x,y,n){  //判断是否会重叠  
  142. var name;  
  143. if(x+this.size[n][0] > this.row) return true; //超出显示范围  
  144. for(var k=1; k<this.size[n][1];k++){  
  145. name=x+'_'+(y-0+k);  
  146. if(this.hasN(name)) {return true;}  //左侧一列有无重叠  
  147. }  
  148. for(k=1; k<this.size[n][0];k++){  
  149. name=(x-0+k)+'_'+y;  
  150. if(this.hasN(name)) {return true;}  //上侧一行有无重叠  
  151. }  
  152. return false;  
  153. };  
  154. box.apply=function(x,y,n){  //大格子中多占的位置  
  155. var posX=x, //大格子左上角位置  
  156. posY=y;  
  157. for(var t=0; t<this.size[n][0]; t++) {  
  158. for(var k=0; k<this.size[n][1]; k++){  
  159. name=(posX+t)+'_'+(posY+k);  
  160. if(t==0 && k==0) { continue; }  
  161. this.obj[name]=0;   //多占的格子无坐标值  
  162. }  
  163. }  
  164. };  
  165. box.put=function(el){  
  166. var x,y;  
  167. for(var i =0;i< this.oArray.length; i++){  
  168. x=box.gen.w*this.oArray[i][0];  
  169. y=box.gen.h*this.oArray[i][1];  
  170. box.mbox[i].style.cssText = "position:absolute;left:"+ x +"px;top:" + y + "px;";  
  171. }  
  172. el.style.height= box.gen.h*(box.maxY+1) +'px';  
  173. };  
  174. </script>  
  175. </head>  
  176. <body>  
  177. <div id="myWidget" class="myWidget"></div>  
  178. <script>  
  179. var myWidget = $id("myWidget");  
  180. //创建随机内容  
  181. var content = '';  
  182. for(i = 0; i < 30; i++) {  
  183. if(!(Math.random()*3 >> 0)){  
  184. height = Math.floor(Math.random()*200 + 100);  
  185. width = Math.floor(Math.random()*200 + 100);  
  186. content += '<div class="MBox"><div class="widgetBox bigBox"><div style="width:' + width +'px;height:' + height +'px;margin:0 auto;" class="innerBox"></div></div></div>';  
  187. }else{  
  188. content += '<div class="MBox"><div class="widgetBox"></div></div>';  
  189. }  
  190. };  
  191. myWidget.innerHTML = content;  
  192. window.onload = function(){  
  193. box.setIfr(myWidget);  
  194. box.init(myWidget);  
  195. };  
  196. window.onresize = function(){  
  197. box.init(myWidget);  
  198. };  
  199. </script>  
  200. </body>  
  201. </html>  

本站文章大部分始于原创，用于个人学习记录，可能对您有所帮助，仅供参考！

1 2 3
Swiper滑动特效插件
Swiper滑动特效插件
全屏背景幻灯片jQuery 插件Vegas
全屏背景幻灯片jQuery 插件Vegas
Flex布局子元素撑开宽度
Flex布局子元素撑开宽度
网页添加实时显示FPS帧率
网页添加实时显示FPS帧率
weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • Web前端
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证