jQuery瀑布流效果

最新推荐文章于 2021-08-29 15:52:18 发布

shaobaojie

最新推荐文章于 2021-08-29 15:52:18 发布

阅读量470

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/shaobaojie/article/details/8769183

版权

PHP 专栏收录该内容

85 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>爆布流</title>
  <style type="text/css">
   *{margin:0;padding:0;}
   #wrap{margin:0 auto;margin-top:20px; position:relative;}
   li{list-style:none;width:280px;height:280px;background:#f7f7f7;box-shadow:2px 2px 8px #999;float:left;display:block;margin:0 20px 20px 0;}
   .li2{height:100px;}
   .li3{height:220px;}
   .li4{height:300px;}
   .li5{height:220px;}
  </style>
  <script src="jQuery.1.6.4.js" type="text/javascript"></script>
  <script type="text/javascript">
   $(function(){
    burst($("#wrap"));
    $(window).resize(function(){
     burst($("#wrap"));
    })
   });
   function burst(o){
    var arr=[],box=$("#wrap ul li"),boxH,minH,boxW=box.width()+20,
    n=$(window).width() / boxW | 0;
    o.css({width:boxW * n });
    box.each(function(i){
     boxH=box.eq(i).height()+20;
     if(i<n){
      arr[i]=boxH;
      box.eq(i).css({position:"static"});
     }else{
      minH=Math.min.apply(Math,arr);    
      minKey=getArrKey(arr,minH);
      arr[minKey] += boxH;
      box.eq(i).css({position:"absolute"});
      box.eq(i).stop().animate({top:minH,left:minKey * boxW});
     }
    });
   }
   function getArrKey(a,h){
    for(var k in a){
     if(a[k]==h){
      return k;
     }
    }
   }
  </script>
 </head>
 <body>
  <div id="wrap">
   <ul>
    <li></li><li class="li2"></li><li class="li3"></li><li class="li4"></li>
    <li></li><li class="li2"></li><li></li><li class="li5"></li><li></li>
    <li class="li2"></li><li class="li3"></li><li></li><li>     
    </li><li class="li5"></li><li class="li4"></li><li></li>
    <li class="li2"></li><li class="li3"></li><li></li><li>     
    </li><li class="li5"></li><li class="li4"></li><li></li>
   </ul>  
  </div>
 </body>
</html>

shaobaojie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery瀑布流效果

爆布流 *{margin:0;padding:0;} #wrap{margin:0 auto;margin-top:20px; position:relative;} li{list-style:none;width:280px;height:280px;background:#f7f7f7;box-shadow:2px 2px 8px #999;float:left;di
复制链接

扫一扫