效果

github地址

先提一個問題，以免你們不看到最後

在微信小程式的迴圈列表中，如何實現圖片的等比例縮放，這件事上我有嘗試，但是效果不佳，歡迎交流解決方案！！

實現方式

雖然實現方式很簡單，但是我起初沒有想到，也是繞了很遠的路才想到。當你看到下面的解決方案的時候，請不要說我sb，因為我確實是沒有想起來，太久沒有學習前端知識，很多屬性基本沒有見過。

• 使用css3的column-＊屬性

  • column-width

  • column-count

  • column-gap

如果熟悉css3的朋友可能一下子就想起來了，但是我並沒有 我是繞了一大圈才想起來

• 實現方式

column-count： 用於分割幾列,這樣你就可以通過直接設定幾列，而不用擔心螢幕寬度，當然這裡有個坑哈，就是圖片自適應！

column-gap: 間距不提。

至於幾個屬性的使用，建議自己w3c一下

心酸歷程

實際上在著手做瀑布流的時候，我想到過純css的的方法，但是我沒有看到過column-＊屬性，因為已經很久沒有再次學習css了。

• 為什麼會首先考慮純css路線 原因很簡單，微信小程式沒有dom操作，如果按照常規的路線是無法實現的。純float是不科學的，因為，你自己可以嘗試，float達不到瀑布流的間隙插針的效果。

• 常規的瀑布流實現方式 前端工程師看到瀑布流的時候，會想到很對js庫，或者jquery庫，這些庫的實現原理大同小異，基本上都是使用了“絕對定位”進行計算佈局。

• 我的彎路 我毫不猶豫的想要按照常規的瀑布實現方式，但是沒有辦法實現那麼多dom層級巢狀計算，所以想了很久沒有想通，才跳回到純css路線的，後面搜尋發現了column-＊屬性，所以才浪費了很長時間。

總結

既然微信小程式沒有Dom操作，可以通過css3的很多屬性來解決一些問題。

程式碼下載