我們使用新浪微網誌的時候，在“微網誌精選”頁面裡可以看到大量的微網誌資訊。該頁面資訊主要是以圖檔配文字說明，頁面使用了自适應網格布局即砌牆效果，圖檔加載技術，以及滾動加載内容技術。本文先介紹砌牆效果。
其實我們做頁面布局就相當于砌牆師傅在完成一堵牆的施工。我們在設計頁面的時候，假如有很多相同的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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/02.jpg" alt="" /></a>
- <p><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菓小菓</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得到的。
上面隻介紹砌牆布局，接下來結合本文把圖檔加載技術和滾屏加載技術進行介紹。
我們在浏覽圖檔量非常大的頁面時，像淘寶商城商品展示、必應圖檔搜尋這類網站，圖檔的加載非常流暢，其中就應用了圖檔延遲加載技術。本文講解Lazyload圖檔加載插件，當我們打開頁面時，首先在螢幕可視區域加載完圖檔，随着向下滾動頁面，圖檔會陸續加載，進而提升了頁面打開速度。
Lazyload是一款基于jQuery的插件，在要顯示大量圖檔的頁面，圖檔是按需加載的，隻在浏覽器可視區内加載圖檔，當使用者使用滾動條下拉時，後面的圖檔才會繼續加載，從某種意義上講，這種技術減少了伺服器的負載。您可以到Lazyload官網下載下傳最新的版本：http://www.appelsiini.net/projects/lazyload。
XHTML
首先載入jquery庫和lazyload插件：
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.lazyload.js"></script>
在body中需要放置圖檔的區域放置多個要顯示的圖檔。圖檔越多效果越明顯。
- <img src="images/blank.gif" data-original="images/01.jpg" width="205" height="188" alt="" />
注意，每張圖檔的src屬性對應的是一張預定義的圖檔，就是再真正的圖檔還沒加載的時候的替代圖檔，我們通常使用1x1的blank.gif圖檔。真正的圖檔是由屬性data-original指定的，然後還需要設定圖檔的寬度和高度。
jQuery
- $(function(){
- $("img").lazyload({
- effect : "fadeIn"
- });
- });
和許多插件使用一樣，隻需要在元素上調用lazyload()即可，現在你就可以看到效果了。Lazyload同樣提供了多個參數可設定不同的效果。
threshold：靈敏度，即可以通過設定靈敏度來控制圖檔的加載，如設定為200，即200像素前加載圖檔，預設為0，即到達圖檔邊界時才加載。
event：綁定事件，即可以通過綁定click、mouseover或者任意自定義事件來觸發圖檔的加載。預設是當使用者滾動到圖檔視窗時觸發圖檔加載。
effect：設定效果，即可以設定圖檔加載時的特效，如fadeIn，預設是show。
您還可以設定一個容器裡的圖檔橫向或縱向滾動加載效果，不過這個用的少，詳情請檢視lazyload官網：http://www.appelsiini.net/projects/lazyload
原文連結：http://www.helloweba.com/view-blog-151.html