HTML5技术

瀑布流布局 - 一望无际tiger

字号+ 作者:H5之家 来源:H5之家 2016-12-08 14:00 我要评论( )

ul li * #waterFall #waterFall_1 .box .box_1 需传参数father : "waterFall" //父级IDchilsNum :20, //子集个数child : "box", //子集类名childWidth : 200, //子集宽度fatherWidth : 1100, //父级宽度heightPdding : 10, //子集上下间距 */ function water

ul li * #waterFall #waterFall_1 .box .box_1 需传参数 father : "waterFall" //父级ID chilsNum :20, //子集个数 child : "box", //子集类名 childWidth : 200, //子集宽度 fatherWidth : 1100, //父级宽度 heightPdding : 10, //子集上下间距 */ function waterFall(opations){ ); opations.chilsNum; .father.children(); opations.childWidth ; opations.fatherWidth; ; ; opations.heightPdding; []; ; ; ; this.init(); } waterFall.prototype = { init:function(){ ){ ; ; .childNum){ ; ; ) }else{ .arrHeight); .fountMin(); ; ; .heightPdding; } } .arrHeight); ; ; ; }, fountMin:function(){ .arrHeight){ .arrHeight[x]){ return parseInt(x); } } }, } window.onload = function(){ (liNum,father,childName){ father.innerHTML = ""; ){ ); li.className = childName; li.style.height ; father.appendChild(li); }; } ; create(num1,document.getElementById() waterFall({ father : , child : , chilsNum :num1, childWidth : 130, fatherWidth : 850, heightPdding : 10, }) ; create(num2,document.getElementById() waterFall({ father : , child : , chilsNum :num2, childWidth : 160, fatherWidth : 900, heightPdding : 20, }) }

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Html5 布局方式 - 飞翔的月亮

    Html5 布局方式 - 飞翔的月亮

    2016-12-01 11:00

  • 响应式布局 - 猴子猿

    响应式布局 - 猴子猿

    2016-11-15 12:00

  • 多列布局 - 刘江龙

    多列布局 - 刘江龙

    2016-11-03 11:00

  • CSS Float 以及相关布局模式 - 刘江龙

    CSS Float 以及相关布局模式 - 刘江龙

    2016-11-03 10:00

网友点评
/