iScroll是一個JS插件，支持鼠標和觸摸的滑動、滾動操作，可用於實現列表（橫、縱、矩陣）、圖片幻燈式播放等效果。
本文結合實例，解析iScroll的使用方法以及注意事項。
說明：本文使用的版本是iScroll4 http://cubiq.org/iscroll-4 (更新的版本見 https://github.com/cubiq/iscroll)
基本概念
使用iscroll一般需要構造如下結構：
<div class="wrapper">
<div class="scroller">
<ul>
<li></li>
......
<li></li>
</ul>
</div>
</div>
最外層是wrapper，用於實例化iScroll的div。
wrapper里面是一個scroller，scroller的寬高與wrapper的寬高共同決定着列表有多少行多少列。例如:
.wrapper {
width:100px;
height:100px;
}
.scroller {
width:300px;
height:200px;
}
則列表會有2行，3列，橫向可以滾3屏，縱向可以滾2屏。
從上圖中可以看出，wrapper之於scroller，就像viewport之於document.
wrapper的寬高好說，你想讓它多大就設置多大。
對於scroller，當元素個數不確定的時候，寬高是要計算出來。
動態計算scroller寬高
為演示如何動態計算寬高，我寫了一個JQueryUI Widget，並且配了一個demo。（代碼下載：http://files.cnblogs.com/dc10101/diorama.zip）
這個widget做的事情就是繪制一個橫向滑動或縱向滑動的iscroll，插件使用者只需指定wrapper（也就是可見區域）的寬高，scroller的寬高會自動計算出來。
由於iscroll本身是用float:left來排列元素，因此在繪制橫向滑動的iscroll時要調換一下各元素的位置，這些算法在插件的代碼中都有體現。
以下截圖展示了橫向縱向兩種iscroll的樣子，以及向尾部添加元素后的狀態。
