我們使用新浪微博的時候,在“微博精選”頁面裏可以看到大量的微博信息。該頁面信息主要是以圖片配文字說明,頁面使用了自適應網格佈局即砌牆效果,圖片加載技術,以及滾動加載內容技術。本文先介紹砌牆效果。
其實我們做頁面佈局就相當於砌牆師傅在完成一堵牆的施工。我們在設計頁面的時候,假如有很多相同的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得到的。更多參數配置請訪問masonry插件網站:http://masonry.desandro.com/docs/options.html