JQUERY+CSS3实现简单的瀑布流模型排列展示 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQUERY+CSS3实现简单的瀑布流模型排列展示kiddy官网|河北运动地板</title>
<style type="text/css">
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px ""; }
.wrapper{width:100%; height:100%; overflow:hidden;}
#lxf_box li{background:#fff; width:200px; height:50px; border:solid 1px #ccc; text-align:center; padding:10px; margin:10px; transition:all 0.7s ease-out 0s}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
 for(var i=0, j=24; i<j; i++){//i控制循环，表示li的序号，j表示li的长度、个数、size
  $("#lxf_box").append("<li><h3>"+i+"</h3></li>");
 }
 function resize(){
  var width = $(window).width();//窗口宽度
  var tlen = $("#lxf_box li").size();//li个数
  var li_left = $("#lxf_box li").outerWidth()+20;//绝对定位的左距离
  var wlen = Math.floor(width/li_left);//每一列的li个数 
  $("#lxf_box li").each(function(){
   var index = $(this).index();
   var li_top = Math.floor(index/wlen);//当li在一行放不下之后断行
   index = index%wlen;//每行的li的left从新开始
   $(this).css({"position":"absolute","left":index*li_left,"top":li_top*80});
  });
 }
 resize();
 window.onresize = resize;
});
</script>
</head>
<body>
 <div class="wrapper">
  <ul id="lxf_box"></ul>
 </div>
</body>
</html>

 

posted @ 2015-04-27 10:38  滇时尚  阅读(312)  评论(0)    收藏  举报