今天看到篇文章,里面图片刚好符合我的要求,所以突发奇想写了这个东西,希望大家指点。。。因为我也是初学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>