袁来如此的工作笔记
袁来如此的工作笔记
竹杖芒鞋轻胜马，谁怕？ 一蓑烟雨任平生。

Jquery瀑布流布局

浏览量:854

body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }

body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }

ul { list-style:none; overflow:hidden; }

img { border:none; }

/* content */

.content { width:960px; margin:10px auto; }

/* case-list */

.case-list { position:relative; width:960px; }

.case-list li{ display:block; position:absolute; border:1px solid #ddd; width:200px; padding:5px; border-radius:5px; background-color:#fff; }

.case-list li img { display:block; width:200px; border-radius:5px; }

</style>

</head>

<body>

<div class="content" id="content">

 <div class="case-list" id="case-list">

  <li><img src="1.jpg" alt="" /></li>

  <li><img src="2.jpg" alt="" /></li>

  <li><img src="3.jpg" alt="" /></li>

  <li><img src="4.jpg" alt="" /></li>

  <li><img src="5.jpg" alt="" /></li>

  <li><img src="6.jpg" alt="" /></li>

  <li><img src="7.jpg" alt="" /></li>

  <li><img src="8.jpg" alt="" /></li>

  <li><img src="9.jpg" alt="" /></li>

  <li><img src="10.jpg" alt="" /></li>

  <li><img src="11.jpg" alt="" /></li>

  <li><img src="12.jpg" alt="" /></li>

  <li><img src="13.jpg" alt="" /></li>

  <li><img src="14.jpg" alt="" /></li>

  <li><img src="15.jpg" alt="" /></li>

  <li><img src="16.jpg" alt="" /></li>

  <li><img src="17.jpg" alt="" /></li>

  <li><img src="18.jpg" alt="" /></li>

  <li><img src="19.jpg" alt="" /></li>

  <li><img src="20.jpg" alt="" /></li>

 </div>

</div>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).on(function(){

 var cases = $("#case-list li");

 var case_h = [[],[],[],[]];

 var sum = [0,0,0,0];

 $.each(cases, function(i){

  var m = i%4;

  var step = Math.floor(i/4);

  cases.eq(i).css("left", 220*m+"px");

  case_h[m].push(cases.eq(i).outerHeight());

  if(!step){

   cases.eq(i).css("top", "0");

  }else{

   var num = 0;

   for(var n=0; n<step; n++){    

    num += case_h[m][n] + 10;

   }

   cases.eq(i).css("top", num+"px");

  }

 });

 $(case_h).each(function(i){

  $(case_h[i]).each(function(j){

   sum[i] += case_h[i][j];

  });

 });

 cases.parent().css("height", sum.sort(function(a,b){return a>b?1:-1})[0]+500+"px");

});

</script>

</body>

</html>


打赏

瀑布流