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

稿源：互联网 2018-09-15 02:21:59 点击： 8189 撤稿纠错

用CSS3搭配JQUERY做的瀑布流，做起来就是简单，容易！

以下讨论的是和JQUERY CSS3 瀑布流相关的JQUERY+CSS3实现简单的瀑布流模型排列展示教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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.alixixi.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://www.alixixi.com/script/jquery-1.8.3.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>

关于JQUERY+CSS3实现简单的瀑布流模型排列展示的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091592027.shtml方便下次再访问哦。

·上一篇： JQUERY实现分组点击 ”全选“ 把所有组里面的 checkbox 都选中
·下一篇： 通过jquery实现图片随机排列排序的特效代码

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

文章分类LIST >>返回首页

最新游戏

最新新闻