css多栏布局探讨3

 第三种布局：（高度不等）效果图如下：

 
正常情况下由于内容多少造成的高度不等的li浮动会出现混乱排列，上面的效果是借助jquery实现的。
查看demo
Html代码如下：
 

<div>

	  <ul>

	    <li><a href="#"><img src=\'#\'" /1.jpg" /><b>我的高度比较高啊，你好速度更客观环境呵呵数量达科技发达房管局</b></a></li>

	    <li><a href="#"><img src=\'#\'" /2.jpg" /><b>我是第二高的，呵呵很好你好</b></a></li>

	    <li><a href="#"><img src=\'#\'" /3.jpg" /><b>你好</b></a></li>

	    <li><a href="#"><img src=\'#\'" /4.jpg" /><b>你好</b></a></li>

	    <li><a href="#"><img src=\'#\'" /5.jpg" /><b>我也来凑个数呵呵 呵呵呵你好</b></a></li>

	    <li><a href="#"><img src=\'#\'" /6.jpg" /><b>你好</b></a></li>

	  </ul>

	</div>

Css代码如下（和css多栏布局探讨2的中的css一样）：

*{
margin:0;
padding:0;
}
body{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
a{
text-decoration:none;
color:#666;
}
a img{
border:none;
}
div{
margin:0 auto;
width:520px;
text-align:left;
background:#CCC;
}
ul{
overflow:hidden;
_height:1%;
padding:0 10px 10px 0;
}
li{
float:left;
display:inline;
margin:10px 0 0 10px;
width:160px;
}
b{
width:160px;
display:block;
text-align:center;
}

下面关键介绍的就是jquery了
首先在head里面引用jquery
<script src=\'#\'" //code.jquery.com/jquery-1.4.2.min.js"></script>
然后是这个效果的代码：
<script>
$(function(){
    var maxHeight = 0;
$('li').each(function(){
   if($(this).height() > maxHeight){ maxHeight = $(this).height();}
})
.height(maxHeight)
.hover(
function(){$(this).addClass('hover').css('opacity','0.7')},
function(){$(this).removeClass('hover').css('opacity','1')}
)
})
</script>
这段jquery代码主旨为：首先定义最大高度为0，然后通过each函数获取每个li的高度，如果它的高度大于最大高度，那么最大高度就等于此高度，就这么简单。其实现仅靠以下精髓代码就行：
<script>
$(function(){
    var maxHeight = 0;
$('li').each(function(){
   if($(this).height() > maxHeight){ maxHeight = $(this).height();}
})
.height(maxHeight)
})
</script>
而其他的一些代码只是我添加的一些鼠标悬浮效果，在这里也简单的说下,当鼠标滑过li添加hover class并设置透明度为0.7（兼容ie6的哦），当鼠标离开li移除hover class并设置透明度为1
查看demo