WxMasonry微信小程序瀑布流佈局模式

效果

github地址

WxMasonry-微信小程序實現瀑布流佈局 https://github.com/icindy/WxMasonry

先提一個問題，以避免大家不看到最後

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

實現方式

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

• 使用css3的column-＊屬性

  • column-width

  • column-count

  • column-gap

若是熟悉css3的朋友可能一會兒就想起來了，可是我並無 我是繞了一大圈纔想起來

• 實現方式

.WxMasonryView{   column-count:2;   column-gap: 10px;   width: 100%; } .WxMasonry{   width: 95%;   background: #fefefe;   border: 2px solid #fcfcfc;   box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);   margin: 5px 2px 2px 2px;   padding: 1px;   padding-bottom: 5px;   transition: opacity .4s ease-in-out;   display: inline-block; }

column-count： 用於分割幾列,這樣你就能夠經過直接設置幾列，而不用擔憂屏幕寬度，固然這裏有個坑哈，就是圖片自適應！

column-gap: 間距不提。

至於幾個屬性的使用，建議本身w3c一下

心酸歷程

實際上在着手作瀑布流的時候，我想到過純css的的方法，可是我沒有看到過column-＊屬性，由於已經好久沒有再次學習css了。

• 爲何會首先考慮純css路線 緣由很簡單，微信小程序沒有dom操做，若是按照常規的路線是沒法實現的。純float是不科學的，由於，你本身能夠嘗試，float達不到瀑布流的間隙插針的效果。

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

• 個人彎路 我堅決果斷的想要按照常規的瀑布實現方式，可是沒有辦法實現那麼多dom層級嵌套計算，因此想了好久沒有想通，才跳回到純css路線的，後面搜索發現了column-＊屬性，因此才浪費了很長時間。

總結

既然微信小程序沒有Dom操做，能夠經過css3的不少屬性來解決一些問題。

代碼下載

下載代碼壓縮包