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。（代码下载：https://files.cnblogs.com/dc10101/diorama.zip）
这个widget做的事情就是绘制一个横向滑动或纵向滑动的iscroll，插件使用者只需指定wrapper（也就是可见区域）的宽高，scroller的宽高会自动计算出来。
由于iscroll本身是用float:left来排列元素，因此在绘制横向滑动的iscroll时要调换一下各元素的位置，这些算法在插件的代码中都有体现。
以下截图展示了横向纵向两种iscroll的样子，以及向尾部添加元素后的状态。
