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

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

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

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

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

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

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

如图2：

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

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

1、关于可视区域

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

如图3：

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

如图4：

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

2、计算可视图片数

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

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

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

1. //获取当前可视区域的宽度   
2.  var pLstWrpWth = $('.jQ_ptLst').width();               
3.  //获取单位图片宽度（图片可能包括边框样式等，取列表元素Li的宽度参与计算以避免误差）   
4.  var valLstLiWth = $('.jQ_ptLst li').width();               
5.  //计算当前可视图片数（可视区域宽度 / 单位图片宽度 再取整）   
6. valImgLth = Math.floor(pLstWrpWth / valLstLiWth);  

3、计算图片间距

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

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

1. //向上取整可避免小数带来的误差）   
2. valpLstMg = Math.ceil((pLstWrpWth - valImgLth * valLstLiWth) / (valImgLth + 1));  

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

标签： 图片列表自适应 矶

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。