微信小程序> CSS超简单实现瀑布流

CSS超简单实现瀑布流

浏览量:3112 时间: 来源:馒头花卷儿

摘要:其实现在瀑布流的应用很是广泛,没有什么指示体验不错,这里我们就使用最简单的来使用。

主要的就两个,一个是控制父类,一个控制包裹住图片的类

<!DOCTYPE html><html><style>    .father{        width: 100%;        box-sizing: border-box;        column-count: 2;        column-gap:15rpx;        padding: 0 20rpx;    }    .list{        box-sizing: border-box;        overflow: hidden;        break-inside: avoid;        border: 1px solid #efefef;        border-radius: 6px;        margin-bottom: 6px;        background: #ffffff;    }</style><body>    <div class="father">        <div class="list"></div>        <div class="list"></div>        <div class="list"></div>        <div class="list"></div>        <div class="list"></div>        <div class="list"></div>    </div></body></html>

如果你想看下效果图请参考详细版: https://suxiexingchen.github.io/2019/12/27/32/

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎