我們使用新浪微博的時候，在“微博精選”頁面里可以看到大量的微博信息。該頁面信息主要是以圖片配文字說明，頁面使用了自適應網格布局即砌墻效果，圖片加載技術，以及滾動加載內容技術。本文先介紹砌墻效果。

其實我們做頁面布局就相當于砌墻師傅在完成一堵墻的施工。我們在設計頁面的時候，假如有很多相同的DIV，裝載不同的內容，這些DIV都使用float：left，如果不限制這些DIV的高度，頁面布局可能會出現砌墻架空的現象。點擊這里查看效果，而經過布局優化后的頁面布局效果大不一樣，請看DEMO。

本文使用David DeSandro寫的一個頁面布局插件Masonry，該插件基于jQuery庫，提供很多參數和方法，可以根據不同的需求定制不同的效果。

XHMTL

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

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

我們仿照新浪微博構建一個html頁面，DIV#container放置多個相同的DIV.photo。

<div id="container">   
      <div class="photo">   
         <a href="#"><img src="images/02.jpg" alt="" /></a>   
         <p><a href="#">菓小菓</a>：隨時都要賣，還要又又美味</p>   
      </div>   
      .....N個photo...   
</div>   

CSS

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

jQuery

$(function(){   
  $('#container').masonry({   
    itemSelector : '.photo',   
    columnWidth : 247   
  });   
});   

調用masonry插件，配置參數itemSelector對應的是class為photo的div，columnWidth為247，columnWidth的值是由.photo的寬度+padding*2+margin*2+border*2得到的。

上面只介紹砌墻布局，接下來結合本文把圖片加載技術和滾屏加載技術進行介紹。