利用css3超轻松实现瀑布流排版-微信小程序 or web

先贴上原作者链接，很漂亮-.- 传送门:https://blog.csdn.net/Wu_shuxuan/article/details/78490063

• 为何说超轻松？

  • 无需知道图片宽高（当然要实现懒加载是必须的）
  • 一个判断
  • 一句css
  • 网上其他的方法对懒懒的博主来说太麻烦了，好了，不瞎BB了，上干货
    

• 其实一句就够了，column-count:2;

.free-WaterfallFlow{
  width:94%;
  column-count:2;/*column-count 属性规定元素应该被分隔的列数：*/
  margin:0 auto;
}
.free-WaterfallFlow .flex-wrap{
  display: inline-block;
  width:100%;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:1%;
  padding-top:5%;
  margin-right:2%;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  text-align: center;
}
.flex-wrap image{
  width:95%;
  margin:0 auto;
}

• 自己怎么喜欢怎么写，这里是小程序的写法，web上的更容易吧

<template lang="pug">
  view.free-panel-title
    view.free-WaterfallFlow
      repeat(for="{{img}}")
        view.flex-wrap.a(wx:if="{{index % 2 == 0}}")
          image(mode="widthFix" src="{{item}}")
          view title
      repeat(for="{{ img }}")
        view.flex-wrap.b(wx:if="{{index % 2 !== 0}}")
          image(mode="widthFix" src="{{item}}")
          view title
</template>

• 说的干货，数据也上吧，度娘上找的，自己掂量。

img : [
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531825645104&di=0cfede1dd354581e22385b1862375a6a&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F13%2F71%2F35%2F24k58PICSiB_1024.jpg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531825645032&di=826b8cfa4f7c5a8765d5c2156913dcbb&imgtype=0&src=http%3A%2F%2Fimg382.ph.126.net%2Fp4dMCiiHoUGxf2N0VLspkg%3D%3D%2F37436171903673954.jpg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531825645104&di=2c9e1223e705806967640495e4bac26b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0147a458783b1ba801219c77f9ec2e.jpg%402o.jpg',
      'http://t1.hxzdhn.com/uploads/tu/bj/slt/yezpvg0x23b.jpg',
      'http://t1.hxzdhn.com/uploads/tu/201807/9999/95ed87388b.jpg',
      'http://t1.hxzdhn.com/uploads/tu/201807/9999/99495c4cf4.jpg',
      'http://t1.hxzdhn.com/uploads/tu/201807/9999/f867c97e25.jpg',
      'http://t1.hxzdhn.com/uploads/tu/201807/9999/2cc7ab0bc5.jpg',
      'http://t1.hxzdhn.com/uploads/tu/201807/9999/2f4435caaf.jpg',
      'http://t1.hxzdhn.com/uploads/tu/201807/9999/ce76898540.jpg',
      'http://t1.hxzdhn.com/uploads/tu/201807/9999/a2ccc41e47.jpg',
      'http://t2.hddhhn.com/uploads/tu/201707/521/83.jpg',
      'http://t2.hddhhn.com/uploads/tu/20150700/2hndrjt0jxe.jpg',
      'http://t2.hddhhn.com/uploads/tu/20150700/2hndrjt0jxe.jpg',
    ]

• 总结
  
  • 利用column-count:2;分成两行。
  • 再用wx:if条件渲染，vue等同理，当然直接用jquery也行。怎么喜欢怎么用。

最后

以上就是虚幻宝贝为你收集整理的利用css3超轻松实现瀑布流排版-微信小程序 or web的全部内容，希望文章能够帮你解决利用css3超轻松实现瀑布流排版-微信小程序 or web所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。