微信小程序,几行代码实现图片瀑布流

最新推荐文章于 2024-08-03 05:52:51 发布

aiotto资源分享

最新推荐文章于 2024-08-03 05:52:51 发布

阅读量1.2k

点赞数 1

分类专栏： JAVA

本文链接：https://blog.csdn.net/qq_36183235/article/details/107535804

版权

JAVA 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

iPhone X效果:

iPhone X

iPad Pro 效果:

iPad Pro

js 代码:

Page({
  data: {
    list:[]
  },
  onLoad: function (options) {
          this.setData({
            list: [
            {"url":"../../image/Yoko1.jpg"}
            ,{"url":"../../image/Yoko1.jpg"},
            {"url":"../../image/無題.jpg"},
            {"url":"../../image/水族館1.jpg"},
            {"url":"../../image/texas.jpg"}
            ,]
          })
  }
})

wxml:

<view class='container'>
    <image src='{{item.url}}'  wx:for="{{list}}" mode='widthFix' wx:key="{{index}}"></image>
</view>

css

.container{
  column-count: 2;
  column-gap:2rpx;
  padding-left: 8rpx;
}
image{
  width: 360rpx;
  box-shadow: 2px 2px 4px rgba(0,0,0,.4);
  overflow-y: scroll;
  border-radius: 30px 30px 30px 30px;
  -moz-border-radius: 25px;
  -webkit-overflow-scrolling: touch;
}