2、计算可视图片数

事情的关键是显示图片，我们就从计算可视图片数开始。可视区域的宽度我们可以轻易获取，所有图片的宽度也是统一的尺寸（什么？不统一？还好还好，我们这的产品经理倒是还没有BT到这个地步呢^^~ 这里还是先讲固定的情况吧，不固定的情况下回再探讨）。先忽略一下图片间距，那么问题可以简化为：

可视图片数 = 可视区域宽度 / 单位图片宽度

代码（代码中涉及到的html代码请查看下文Demo）：

3、计算图片间距

那间距怎么计算呢？从图4我们可以看出，除去所有可视图片的宽度剩下的就是间距的总和。于是：
间距总和 = 可视区域宽度 – 单位图片宽度 * 可视图片数

这样我们就可以计算图片间距了：
图片间距 = 间距总和（除去可视图片宽度的可视区域宽度） / 间距个数（即可视图片数+1，为何+1？看图4）
代码：

到这里，你会发现，其实最终需要解决的问题就是计算图片间距。有了间距，我们就已经能做到根据栏目宽度，完好显示可视区域的图片了。至于能显示多少图，此时我们已经不关心了。

4、需要注意的情况

当上面计算出来的间距总和很小，或者干脆为0了… 如图5：

像基友一样合在一起显然不好看~ – 此时，我们可以设定一个最小间距来解决这个问题。当计算出的间距小于这个间距时，就减少1个可视图片，把原本属于这个图片的宽度分配给其余的图片作为间距。代码：

还有一种情况，如图6：

当可视图片数大于列表总图片数时（还有等于的情况哦），图片总数即为可视图片数。代码：

到这里，基本上图片列表自适应宽度显示就解决了，接下来就是图片列表的滚动问题。

5、列表滚动

有经验的同学可能一下就想到了，问题的关键是要怎么判断当前滚动的是否为最后一张图片（啊？你是说做循环滚动？滚到最后一张无缝拼接第一张图，如此永远滚下去？其实，我只是想说，你们的产品经理心眼真好~ 嗯好吧，看在大家都不容易的份上，我们姑且还是探讨一下这种情况吧）。

那么如何知道滚到最后一张图片了呢？我想的办法是通过宽度计算，即：
当已滚动总宽度等于非可视区域宽度（即可视区域两侧的宽度之和）时，即不能再向右滚动了。如图7：

代码：

以上是向右滚的情况，向左滚时就简单了。当已滚动宽度为0时，即是向左滚动到头了。

6、绑定方法

图片列表滚动讲完了，接下来就是执行这些方法了。为了自适应用户适时改变窗口大小的情况，需要将自适应函数绑定到resize方法中执行，代码：

啰嗦这么多，其实主要围绕两个问题：
a. 通过计算图片间距控制列表的显示
b. 通过宽度计算解决滚动至最末

OK~点击这里是DEMO…（用浏览器打开之后，通过改变窗口大小，体验图片列表自适应效果。）

小思考（没看DEMO的同学可以不用思考哦~）：将DEMO用浏览器打开后，拖动窗口至最小宽度，即当前栏目宽度小于图片宽度时（小不动？用Chrome试试），列表中看不到图了，为什么？如何解决呢？

整个过程其实还是挺简单的，不知道我有没说清楚，大家有没听明白？如果没说清楚的地方正好你又感兴趣，可以留言哦~亲。不过，如果您是个修为高深的化神期强者，也希望多多指出不当之处啊，感谢感谢~~小可尚徘徊于筑基期~露怯…..学好JS说了好多年，想想那些年……所以，朋友，如果你也是个网页重构，别光写DIV了，有空多学学写写JS吧，挺有意思的呢~

话说，互联网发展日新月异，各种新技术层不出穷，需要学习的东西还真多呢。加油！