两行css代码实现瀑布流,html,css最简单的瀑布流实现方式

两行css代码实现瀑布流,html,css最简单的瀑布流实现方式!


效果如图
两行css代码实现瀑布流,html,css最简单的瀑布流实现方式_第1张图片
html

<div class="waterfall-container">
    <div class="waterfall-item">
       这里可以自己实现宽高不一样的div,随便复制十几个看效果,
    </div>
</div>

有个坑就是:这个列表显示顺序是 左边 123右边456,不符合正常展示逻辑;然后可以使用js对数据进行预处理,具体的自己操作处理;

你可能感兴趣的:(css瀑布流,css,html5,css3)