E企盈营销工具技术服务商 热线:4006-838-530

小程序开发之瀑布流布局

E企盈直播平台营销卖货系统

在实际开发中,有很多时候回用到瀑布流布局,应用场景最多的可能要属图片展示了。下面记录一下在小程序中如何实现瀑布流布局。(都是美女小姐姐的图片-_-)一、图片分列排列计算我们要实现一个固定排列成两列的布局,将图片动态加载进来,而加载的图片会根据图片的尺寸自动决定排左还是排右。/* 瀑布流 *//*单张图片*/.img_item {  width: 48%;  margin: 1%;  display: inline-block;  vertical-align: top;}以上是单张图片的样式,接下来是在js中通过代码来计算图片的排列顺序。首先定义两个变量:col1H、col2H,用来计算排列顺序。let col1H = 0;let col2H = 0;然后,在data中定义一些会用到的变量。scrollH: 0,    imgWidth: 0,//图片宽度    loadingCount: 0,//图片总数    images: [],//存放图片数据    col1: [],//左    col2: [],//右在onload方法中,用下面的代码计算一些变量的值wx.getSystemInfo({      success: (res) = {        let ww = res.windowWidth;        let wh = res.windowHeight;        let imgWidth = ww * 0.48;        let scrollH = wh;        this.setData({          scrollH: scrollH,          imgWidth: imgWidth        });        this.loadImages();      }    })最后,通过具体的代码计算出哪些图片放左边,哪些图片放右边。//通过计算,将图片分成两列  onImageLoad: function(e) {    let imageId = e.currentTarget.id;    let oImgW = e.detail.width; //图片原始宽度    let oImgH = e.detail.height; //图片原始高度    let imgWidth = this.data.imgWidth; //图片设置的宽度    let scale = imgWidth / oImgW //比例计算    let imgHeight = oImgH * scale; //自适应高度    let images = this.data.images;    let imageObj = null;    for (let i = 0; i images.length; i++) {      let img = images[i];      if (img.id === imageId) {        imageObj = img;        break;      }    }    imageObj.height = imgHeight;    let loadingCount = this.data.loadingCount – 1;    let col1 = this.data.col1;    let col2 = this.data.col2;    if (col1H = col2H) {      col1H += imgHeight;      col1.push(imageObj);    } else {      col2H += imgHeight;      col2.push(imageObj);    }    let data = {      loadingCount: loadingCount,      col1: col1,      col2: col2    };    if (!loadingCount) {      data.images = [];    }    this.setData(data);  },  loadImages: function() {    let images = [      {img:’../../images/1.jpg’,height:0},      { img: ‘../../images/2.jpg’, height: 0 },      { img: ‘../../images/3.jpg’, height: 0 },      { img: ‘../../images/4.jpg’, height: 0 },      { img: ‘../../images/5.jpg’, height: 0 },      { img: ‘../../images/6.jpg’, height: 0 },       { img: ‘../../images/7.jpg’, height: 0 },      { img: ‘../../images/8.jpg’, height: 0 },      { img: ‘../../images/9.jpg’, height: 0 },      { img: ‘../../images/10.jpg’, height: 0 },      { img: ‘../../images/11.jpg’, height: 0 },      { img: ‘../../images/12.jpg’, height: 0 },      { img: ‘../../images/13.jpg’, height: 0 },      { img: ‘../../images/14.jpg’, height: 0 }    ]    let baseId = “img-” + (+new Date());    for (let i = 0; i images.length; i++) {      images[i].id = baseId + “-” + i;    }    _this.setData({      loadingCount: images.length,      images: images,    })  },二、布局view class=”view-fp-container”  !–瀑布流–  view style=”display:none”    image wx:for=”{{images}}” wx:key=”id” id=”{{item.id}}” src=”{{item.img}}” bindload=”onImageLoad”/image  /view  scroll-view scroll-y=”true” style=”height:{{scrollH}}px” bindscrolltolower=”scrollLower”    view style=”width:100%”      view class=”img_item”        view style=”background-color:#fff;margin-bottom:10rpx;” wx:for=”{{col1}}” wx:key=”id”          image src=”{{item.img}}” style=”width:100%;height:{{item.height}}px” mode=’aspectFill’/image        /view      /view      view class=”img_item”        view style=”background-color:#fff;margin-bottom:10rpx;” wx:for=”{{col2}}” wx:key=”id”          image src=”{{item.img}}” style=”width:100%;height:{{item.height}}px” mode=’aspectFill’/image        /view      /view    /view  /scroll-view/view三、样式page {  background-color: #f2f2f2;}.view-fp-container {  display: flex;  flex-direction: column;  margin: 0 10rpx;}/* 瀑布流 */.img_item {  width: 48%;  margin: 1%;  display: inline-block;  vertical-align: top;}四、最终效果(注:展示效果和图片数量、宽高有关系)

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序开发之瀑布流布局
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏