我們使用新浪微博的時(shí)候，在“微博精選”頁面裏可(kě)以看到大(dà)量的微博信息。該頁面信息主要是以圖片配文字說明(míng)，頁面使用了自适應網格布局即砌牆效果，圖片加載技(jì)術(shù)，以及滾動加載內(nèi)容技(jì)術(shù)。本文先介紹砌牆效果。

其實我們做(zuò)頁面布局就相當于砌牆師(shī)傅在完成一堵牆的施工。我們在設計(jì)頁面的時(shí)候，假如有(yǒu)很(hěn)多(duō)相同的DIV，裝載不同的內(nèi)容，這些(xiē)DIV都使用float：left，如果不限制(zhì)這些(xiē)DIV的高(gāo)度，頁面布局可(kě)能會(huì)出現砌牆架空(kōng)的現象。點擊這裏查看效果，而經過布局優化後的頁面布局效果大(dà)不一樣，請(qǐng)看DEMO。

本文使用David DeSandro寫的一個(gè)頁面布局插件Masonry，該插件基于jQuery庫，提供很(hěn)多(duō)參數(shù)和(hé)方法，可(kě)以根據不同的需求定制(zhì)不同的效果。

XHMTL

首先是要引入jQuery庫和(hé)Masonry插件。

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

	
	

		 
		

			菓小(xiǎo)菓：随時(shí)都要賣，還(hái)要又又美味
		

	
.....N個(gè)photo...

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插件，配置參數(shù)itemSelector對應的是class為(wèi)photo的div，columnWidth為(wèi)247，columnWidth的值是由.photo的寬度+padding*2+margin*2+border*2得(de)到的。