思洋互动网站建设学前班

我们使用新浪微博的时候，在“微博精选”页面里可以看到大量的微博信息。该页面信息主要是以图片配文字说明，页面使用了自适应网格布局即砌墙效果，图片加载技术，以及滚动加载内容技术。本文先介绍砌墙效果。
广州网站建设,网站建设,广州网页设计,广州网站设计

其实我们做页面布局就相当于砌墙师傅在完成一堵墙的施工。我们在设计页面的时候，假如有很多相同的DIV，装载不同的内容，这些DIV都使用float：left，如果不限制这些DIV的高度，页面布局可能会出现砌墙架空的现象。点击这里查看效果，而经过布局优化后的页面布局效果大不一样，请看DEMO。

本文使用David DeSandro写的一个页面布局插件Masonry，该插件基于jQuery库，提供很多参数和方法，可以根据不同的需求定制不同的效果。

XHMTL

首先是要引入jQuery库和Masonry插件。

1. <script type="text/javascript" src="jquery.js"></script> 
2. <script type="text/javascript" src="jquery.masonry.min.js"></script>  

我们仿照新浪微博构建一个html页面，DIV#container放置多个相同的DIV.photo。

1. <div id="container">   
2.       <div class="photo">   
3.          <a href="#"><img src="images/02.jpg" alt="" /></a>   
4.          <p><a href="#">菓小菓</a>：随时都要卖，还要又又美味</p>   
5.       </div>   
6.       .....N个photo...   
7. </div>   

CSS

1. #container{width:780px; margin:10px auto}   
2. .photo{float:left; width:205px; margin:10px; padding:10px; border:1px solid #d3d3d3;   
3.  background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;    
4.  border-radius:4px;}   
5. .photo img{width:205px}   
6. .photo p{line-height:20px; margin:4px auto}   

jQuery

1. $(function(){   
2.   $('#container').masonry({   
3.     itemSelector : '.photo',   
4.     columnWidth : 247   
5.   });   
6. });   

调用masonry插件，配置参数itemSelector对应的是class为photo的div，columnWidth为247，columnWidth的值是由.photo的宽度+padding*2+margin*2+border*2得到的。

上面只介绍砌墙布局，接下来结合本文把图片加载技术和滚屏加载技术进行介绍。
广州网站建设,网站建设,广州网页设计,广州网站设计