移動端瀑布流布局是一種比較流行的網頁布局方式，視覺上來看就是一種像瀑布一樣垂直落下的排版。每張並不是顯示的正正方方的，而是有的長有的短，呈現出一種不規則的形狀。但是它們的寬度通常都是相同的因為移動端瀑布流布局主要為豎向瀑布流，因此本文所**的是豎向瀑布流
豎向瀑布流布局主要有下面幾種特點：
不同於傳統的分頁，瀑布流因為以上這些特點一般被用在這些場景下：
一般來說主要分為 css 實現和 js 實現
css 實現主要是用到一些專門的樣式屬性，實現起來簡單，但是往往會有相容性問題
js 實現的方法則不存在這些問題，並且能實現比較個性化的需求，但是實現起來比較麻煩
column 實現瀑布流主要依賴兩個屬性
column-count 屬性是設定共有幾列
column-gap 屬性是設定每列之間的間隔
column 相容性
**
001 ······
008
flex-flow: column wrap使其換⾏
**
001 ······
008
效果
可以發現排序順序是先垂直方向，然後才是水平方向的。column 多列布局和 flex 彈性布局方法實現的效果圖最終相似
在不考慮相容性或者沒有特殊展示順序需求下，只是實現瀑布流的話上面兩種方案是夠用的。如果要實現一些個性化的需求的話，還是得用 js
主要思路就是：
先將第一行排滿
計算第一行的所有高度，將第二行第一張圖放在第一行最矮的後面
進行玩步驟 2，重新計算當前所有列高度，避免步驟 2 新增完成後，該列高度還是最矮
完整**
001
015
效果
不同於上面兩個 css 實現的瀑布流，js 實現的排序順序是先水平方向，然後才是垂直方向
可以看到當滾動頁面的時候，新的會不斷新增進來，這樣就實現懶載入了
如果實現效果簡單不考慮相容的的話可以選擇使用 css 實現；若要相容老版本瀏覽器或者實現一些個性化的需求還是得用 js 實現
當然除了上文說的這些方法以外，也可以使用第三方庫 masonry 實現
帶你使用h5開發移動端小遊戲
在使用jy1時，我做了乙個塔防的h5遊戲，它做得有點像 保衛蘿蔔 當然它只是個原型，如下圖所示，它的演示位址是h5塔防遊戲 它的設計是canvas加上div混合的一種形式，這也就是jy2.0的起步，在乙個遊戲中，我們通常會劃分三層結構 第一層，view,是遊戲的核心部分，整個動畫的顯示 第二層，co...
h5移動端適配
原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...
移動端h5優化
1 減少js載入體積 很多庫能用cdn的盡量使用cdn，這樣打包出來的js體積會很小，載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui，mintui等 4 儘量減少網路請求數量 程式中的資料，有的能乙個介面返回的盡量乙個介面返回，不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...