关于图片列表的宽度自适应解决办法

从事网页重构好几年了，Javascript能力一直比较菜，主要还是做得太少。为了提高这方面的能力，这段时间主动承担了一些这方面的工作，真心感到学习和积累的不易，不过时常伴随着一些解决问题之后的小小成就感又让人乐此不疲。

在近期一个项目中，遇到一个图片列表自适应宽度显示的问题，需求本身并不难，借此且算是梳理和总结一下当时的解决思路吧，也期望能给有需要做这类需求而又知如何下手的同学带来一点小启发。实现的方法应该很多，如果你有更好的，要分享哦~~

需求是这样的，在一个自适应宽度的栏目里（如图1）：

1、 栏目的宽度可以因用户的操作发生改变，如拖拽改变窗口大小等；

2、 当宽度改变之后，需要图片列表总是能在栏目中完好地显示：图片之间有一定的间距，并且不会出现半张图。

3、 若当前宽度不能完全显示所有图片时，可以通过点击左右两边的箭头进行滚动显示。

如图2：

经过分析我们可以把需求分解为：栏目的宽度自适应、图片列表的自适应显示、列表的左右滚动。栏目的宽度自适应，可以直接用样式来解决，宽度的获取也简单，不再多说。图片的滚动也还好说，无非就是通过样式改变列表的左右位置来实现。难点在于，在一个宽度会各种变化的区域中，怎么让图片列表自适应显示呢？

对比图1、图2，我们发现前后的变化有：栏目宽度、图片显示个数、图片之间的间距。宽度自适应好办，那图片个数和间距呢？嗯哪，这就是我们需要解决的核心问题。

1、关于可视区域

再看图2，栏目中只有3个图片，我们知道是因为其它部分被样式隐藏了，而整个图片列表其实是一直存在的一个整体。就像Flash里的遮罩一样，我们要做的其实是按照用户的意愿控制图片列表的某一部分显示给用户看到。为便于后面好讲，我们把用户可以看到的这部分列表区域称为列表的可视区域。它的特点是随着当前栏目的宽度变化而变化，

如图3：

图片列表是死的，栏目宽度是变化的，如何让图片列表适应栏目宽度的变化完好显示在可视区域里呢？好吧，你已经想到了…答案就是通过改变图片之间的间距来实现。

如图4：

那么我们可以得出：
可视区域的宽度 = 可视区域内可显示的图片宽度总和（下文称可视图片数） + 图片间距总和