JQUERY+CSS3实现简单的瀑布流模型排列展示-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20237 次

以下是程序代码

<!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实现简单的瀑布流模型排列展示 demo by js.aiyiweb.com</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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>