|
jquery实战8：高级特效瀑布流效果
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> *{margin:0px;padding:0px;} #pbl{width:900px;height:10px;background:red;margin:0px auto;position:relative;} ul li{list-style:none;position:absolute;} </style> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="pbl"> <ul> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> <li><img src="images/5.jpg"/></li> <li><img src="images/6.jpg"/></li> <li><img src="images/7.jpg"/></li> <li><img src="images/8.jpg"/></li> <li><img src="images/9.jpg"/></li> <li><img src="images/10.jpg"/></li> <li><img src="images/11.jpg"/></li> <li><img src="images/12.jpg"/></li> <li><img src="images/13.jpg"/></li> <li><img src="images/14.jpg"/></li> <li><img src="images/15.jpg"/></li> <li><img src="images/16.jpg"/></li> </ul> </div>
<script type="text/javascript">
$(window).load(function(){//页面加载时就执行的事件函数 var len=$("#pbl ul li").length;//获取li标签的长度即个数 var i=0; var ImgHeight={line1:[],line2:[],line3:[],line4:[]};//嵌套数组用于保存各列图片的高度。 var obj=$("#pbl ul li"); for(i=0;i<len;i++){ var inew=i%4;//循环取模运算，4为要排列分布的列数。 switch(inew){ case 0: obj.eq(i).css({left:"0px"});//序列号取模为0的放在第一列 序列号为0 4 8 12的这四张图片 ImgHeight.line1.push(obj.eq(i).height());//在嵌套数组1中存放第一列的图片高度 var step=Math.floor(i/4);//步数的判断 if(step==0){//第一步：即顶部第一排的图片离顶高度为0 obj.eq(i).css({top:"0px"}); }else{//第二‘三’四排的图片要获取上一排的图片高度，即第二三四步。 var j=0; var num=0; for(j=0;j<step;j++){//循环取得当前步数的对应的列数数组中的图片高度 num=num+ImgHeight.line1[j]+10;//变量存储下面样式距顶的高度。10为边距 } obj.eq(i).css({top:num}); }
break;
case 1: $("#pbl ul li").eq(i).css({left:"298px"});//序列号取模为0的放在第一列 序列号为1 5 9 13 ImgHeight.line2.push(obj.eq(i).height()); var step=Math.floor(i/4); if(step==0){ obj.eq(i).css({top:"0px"}); }else{ var j=0; var num=0; for(j=0;j<step;j++){ num=num+ImgHeight.line2[j]+10; } obj.eq(i).css({top:num}); }
break;
case 2: $("#pbl ul li").eq(i).css({left:"596px"});//序列号取模为0的放在第一列 序列号为2 6 10 14 ImgHeight.line3.push(obj.eq(i).height()); var step=Math.floor(i/4); if(step==0){ obj.eq(i).css({top:"0px"}); }else{ var j=0; var num=0; for(j=0;j<step;j++){ num=num+ImgHeight.line3[j]+10; } obj.eq(i).css({top:num}); }
break;
case 3: $("#pbl ul li").eq(i).css({left:"894px"});//序列号取模为0的放在第一列 序列号为3 7 11 15 ImgHeight.line4.push(obj.eq(i).height()); var step=Math.floor(i/4); if(step==0){ obj.eq(i).css({top:"0px"}); }else{ var j=0; var num=0; for(j=0;j<step;j++){ num=num+ImgHeight.line4[j]+10; } obj.eq(i).css({top:num}); }
break;//894就是4列图片的宽度加各列之间图片的间距，也可表示为inew*298。
}; }; //alert(1); }); </script> </body> </html> 
|
5683
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
