流布式布局

最新推荐文章于 2020-12-17 21:40:45 发布

d945332077

最新推荐文章于 2020-12-17 21:40:45 发布

阅读量806

点赞数

分类专栏： javascript 文章标签： function class border null float 文档

本文链接：https://blog.csdn.net/d945332077/article/details/7823194

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天看到篇文章，里面图片刚好符合我的要求，所以突发奇想写了这个东西，希望大家指点。。。因为我也是初学javascript----一定要给意见哦。肯定还有很多需要改进的地方

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
   #lxf-box {
       width:1000px;
       height:auto;
       overflow:hidden;
       margin:0 auto;
       border:1px solid red;
   }
   #lxf-box li {
       float:left;
       width:200px;
       margin-left:20px;
       margin-top:20px;
       list-style-type:none;
       text-align:center;
       overflow:hidden;
   }
   img {
       border:3px double #CCC;
   }
</style>
</head>
<body>
<ul id="lxf-box">
   <li class="li1">
       <img src="http://www.liuxiaofan.com/demo/waterfall/OLqypfV.jpg">
   </li>
   <li class="li2">
       <img src="http://www.liuxiaofan.com/demo/waterfall/msbvKWyQQzZuZy.jpg"><br />
       <img src="http://www.liuxiaofan.com/demo/waterfall/msbvKWyQQzZuZy.jpg">
   </li>
   <li class="li3">
       <img src="http://www.liuxiaofan.com/demo/waterfall/WbWXwqpcxqcued.jpg"><br />
       <img src="http://www.liuxiaofan.com/demo/waterfall/msbvKWyQQzZuZy.jpg"><br />
       <img src="http://www.liuxiaofan.com/demo/waterfall/msbvKWyQQzZuZy.jpg"><br />
       <img src="http://www.liuxiaofan.com/demo/waterfall/OLqypfV.jpg"><br />
       <img src="http://www.liuxiaofan.com/demo/waterfall/OLqypfV.jpg"><br />
   </li>
   <li class="li4">
       <img src="http://www.liuxiaofan.com/demo/waterfall/WbWXwqpcxqcued.jpg"><br />
       <img src="http://www.liuxiaofan.com/demo/waterfall/WbWXwqpcxqcued.jpg">
   </li>
</ul>
<script type="text/javascript" src="file:///F|/workspace/jquery-1.7.min.js"></script>
<script type="text/javascript">
   var liWidth = {};
   var liArray = [];
   var thisLi = null;
   var liCount = 4;
   $().ready(function() {
       var srcArray = ['zwPqjasxHYvdz','rabGVkIGq','CczowVxqM','MiEJRJdimxPdzdjefXw','mqXLNuWiPrbdz',
                       'mrTNaJTaQyluZyLvvnWS','QPIzxiMkmlHdzdjefX','OXsDgKacJeTdzdjefXwi','IWpjipjp',
                       'eJupzWlGPxz','DQJwrFnDpgtdz','REsUNXUvAkrdzdj','SOmyOQZtlUfdzdjefXwi','DvKZdxCjtfqMv',
                       'qymffF','+nwbuJpc','YwabRquVKrxd','OEycuedk','MsZvAyOFukxdzdjefXwi','mWFuVrzCzpPdzdje',
                       'STVDndiZsIduZyLv','YewRtz','rSmEiZGlAvvuZ','rabGVkIGq'];
       var imgSrc = null;
       for(var i=0;i<srcArray.length;i++) {
           getMinHeight();
           imgSrc = "<br /><img src='http://www.liuxiaofan.com/demo/waterfall/"+srcArray[i]+".jpg' />";
           $("."+thisLi).append(imgSrc);
       }

   });
   function getMinHeight() {
       $("li").each(function(i, ele) {
           liWidth[""+$(ele).attr("class")+""] = $(ele).outerHeight();
       });
       for(var i=1;i<=liCount;i++) {
           liArray[i-1] = parseInt(liWidth['li'+i],10);
       }
       liArray.sort(function(a,b) {
           if(a > b) {
               return b;
           }
       });
       for(var i=1;i<=liCount;i++) {
           if(liWidth["li"+i] == liArray[0]) {
               thisLi = "li"+i;
           }
       }
   }
</script>
</body>
</html>

d945332077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
流布式布局

今天看到篇文章，里面图片刚好符合我的要求，所以突发奇想写了这个东西，希望大家指点。。。因为我也是初学javascript----一定要给意见哦。肯定还有很多需要改进的地方无标题文档 #lxf-box { width:1000px; height:auto; overflow:hidden; m
复制链接

扫一扫