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

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));  

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

4、需要注意的情况

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

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

1. var pLstLesMg = 5;          //设定最小间距，即临界间距   
2.  if(valpLstMg < pLstLesMg){   
3.     valImgLth = valImgLth - 1;  //当间距小于临界间距时，可视图片数-1   
4.     fnpLstMg();         //重新计算可视图片数-1之后的间距   
5. };  

还有一种情况，如图6：

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

1. var pLstImgLth = $('.jQ_ptLst').find('img').length; //获取图片总数   
2.  if(valImgLth >= pLstImgLth){   
3.     valImgLth = pLstImgLth;  //图片总数即为可视图片数   
4.     fnpLstMg();      //用新可视图片数重新计算间距   
5.     $('.jQ_plstRoRt').hide();//隐藏向右滚动箭头（初始化时可默认左箭头隐藏，右箭头显示）   
6. };  

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

5、列表滚动

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

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

代码：

1. var ptLstCurMg = parseInt(pLstRoWrp.css('margin-left')); //获取当前已滚动宽度   
2.  //当已滚动宽度 = 非可视区宽度，即已滚动至最后一图   
3. var ptLstRoWth = (pLstImgLth - valImgLth) * (ptLstImgMg + valLstLiWth);    
4. if(ptLstCurMg + ptLstRoWth == 0){   
5.     $this.hide();   //隐藏右箭头   
6. };  

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

1. //当已滚动宽度 = 0，即已滚动至最前一图   
2. if(ptLstCurMg == 0){   
3.     $this.hide();   //隐藏左箭头   
4. };  

6、绑定方法

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

1. //一旦窗口大小发生变化即会执行   
2. $(window).resize(function(){   
3.     fnAutoWth();    //自适应方法   
4. });  

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

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

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

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

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

作者：Jonson

文章来源：腾讯GDC