css快速实现瀑布流
2021-01-22 本文已影响0人
Enginner_XZ
- css有提供可以实现瀑布流的样式 父盒子设置
column-count
: 2 列数就可以直接实现瀑布流 ,此时最后一个元素会被拦腰截断换到第二列 - 子元素设置 page-break-inside : avoid; 可以解决元素被截断问题
通过css实现的瀑布流有个很难解决的问题 ,正常左右排序使用这个属性后会变成上下竖向的排序 ,对排序有要求最好还是使用JS实现瀑布流 - 这个属性最初为方便类似报纸的文本布局 ,可以尝试将数据重新排序解决排序问题