純css瀑布流布局

由於公司的項目需要才用到瀑布流布局

因為后台返回的json直接循環出來的,所以不能做左右浮動的那種,所以才用到了瀑布流布局

16年之前的瀑布流布局基本都時基於js或者直接用jq插件的,但是隨着技術的進步或更新,想用純css達到這樣的效果也是可以的

話不多說直接上代碼

CSS樣式是

.waterfall{
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari 和 Chrome */
    column-count:2;
    -moz-column-gap: 30px;
    -webkit-column-gap: 30px;
    column-gap: 30px;
　　display:inline-block;
}

就結束了,是不是很簡單,我也覺得有點出乎意料的簡單,哈哈,反正是實現了