前言:最近项目好几个都怼到一起,导致好久没有更新了。这里就简单记录下这段时间常常要写的瀑布流列表 纯css实现: 直接上代码 < style lang = "scss" > . post - list { /* 列表设置,2列;列间距4*/ - webkit - column - count : 2 ; - webkit - column - gap : 16upx ; padding : 30upx 16upx ; . post - li { - webkit - column - break - inside : avoid ; /* 单个设置*/ } } < / style > 效果:竖向排列,并且在排列中,会尽量使得两列的高度相近 竖向排列.png 所以这样的实现并不能用于列表分页加载。。。每次加载新页面,会使得整个列表重排。。。。 js动态排序: 还是用最近一直在写的uni-app写的,通过获取元素的高度进行绝对定位 还是上代码(数据) data ( ) { return { mescroll : null , //目前在用的上拉组件(别的组件也一样,原理基本相似) upOption : { //上拉组件配置 page : { size : 6 // 每页数据的数量,默认10 } , } , list : [ ] , //列表数据 mark : 0 , // 定位