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

2021-08-02 13:43:55 字數 620 閱讀 2506

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

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

.wxmasonryview

.wxmasonry

column-gap: 間距不提。

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

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

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

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

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...

微信小程式

2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作,非同步操作裡面this.data.直接賦值,是無效的,必須使用this.setdata this.setdata msg he llo wor l...

微信小程式

你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下markdown的基本語法知識。全新的介面設計,將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式,markdown將 片顯示選擇的高亮樣式進行展示 全新的ka...