瀑布流布局解决方案

类似于蘑菇街、美丽说、淘女郎等，错落有致的瀑布流效果。虽然我们可以用算法用最原始的垂直结构来实现，但是总归增加了布局难度。

于是采用masonry来解决。

请自行网上下载Masonry，调用方法如下：

<script>
$(document).ready(function() {
    $('.list').masonry({
        itemSelector:'.list li',
        columnWidth:247
    });
});
</script>

值得注意的是IE6的边框处理：

margin:0 0 0 -1px; border-top:0;position:relative; zoom:1;

红色的就是修正IE6下框被“吃掉”的“bug”。

另外的问题就是遨游最新版本，因为图片和遨游本身等问题，会出现不兼容问题，FF、IE8、IE6兼容。

最后就是li里面，谨慎处理内部float。

 <ul>
      <li>
       <div>
        <dl>
         <dt><a href=""><img src="/themes/style/imgnew/m-p7.jpg" alt=""></a></dt>
         <dd><a href=""><img src="/themes/style/imgnew/m-pl.gif" alt="评论"><b>4</b>评论</a></dd>
        </dl>
        <table>
         <tr>
         <td><a href=""><img src="/themes/style/imgnew/m-p8.jpg" alt="张志艳"></a></td>
         <td><h4><a href="">张志艳</a></h4>半天前</td>
         </tr>
        </table>
        <div>原　　价：<span>￥234.00</span></div>
        <div>如何成为淘女郎的首页女郎？如何教你玩转。</div>
       </div>
      </li>

</ul>

 

.list {width:988px; margin:0 auto ; padding:0 0 0 1px;list-style:none;  border-top:solid 1px #ccc;}
 .list li {float:left;width:247px; padding:0px;}
 .list li .xxxxx{width:246px;border:solid 1px #ccc; margin:0 0 0 -1px; border-top:0;position:relative; zoom:1;}
 .list li .xxxxx:hover{background:#e0e0e0;}