注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

瀑布流布局解决方案  

2012-05-24 18:15:01|  分类: 视觉设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:WordPress

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

于是采用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;}

  评论这张
 
阅读(267)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018