關於圖片列表的寬度自適應解決辦法

從事網頁重構好幾年了，Javascript能力一直比較菜，主要還是做得太少。為了提高這方面的能力，這段時間主動承擔了一些這方面的工作，真心感到學習和積累的不易，不過時常伴隨著一些解決問題之後的小小成就感又讓人樂此不疲。

在近期一個項目中，遇到一個圖片列表自適應寬度顯示的問題，需求本身並不難，借此且算是梳理和總結一下當時的解決思路吧，也期望能給有需要做這類需求而又知如何下手的同學帶來一點小啟發。實現的方法應該很多，如果你有更好的，要分享哦~~

需求是這樣的，在一個自適應寬度的欄目裡（如圖1）：

1、 欄目的寬度可以因用戶的操作發生改變，如拖拽改變窗口大小等；

2、 當寬度改變之後，需要圖片列表總是能在欄目中完好地顯示：圖片之間有一定的間距，並且不會出現半張圖。

3、 若當前寬度不能完全顯示所有圖片時，可以通過點擊左右兩邊的箭頭進行滾動顯示。

如圖2：