- 当前 Bug 的表现（可附上截图）[图片] - 预期表现 [图片] - 复现路径  没有上线不能复现 - 提供一个最简复现 Demo main.wxml      <view class="main-wrapper" wx:if="{{!showModalStatus && subjectList.length}}"> <view class="subject-wrapper clearfix"> <view class="more-view" bindtap="showModal"> <image src="../images/more.png"></image> </view> <scroll-view scroll-x="true" class="scroll-view" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"> <block wx:for="{{subjectList}}" wx:for-item="subject" wx:key="subject.SUBJECT_ID"> <view class="scroll-view-item {{subject.cls}} {{subject.active?'active':''}}"  bindtap='toGetSubNews' data-value="{{subject.SUBJECT_ID}}" data-index="{{index}}"> <text>{{subject.SUB_SHORT_NAME}}</text> </view> </block> </scroll-view> </view> </view> main.wxss .main-wrapper { position:fixed; top:0; width:100%; z-index:2; border-bottom: 5px solid #F1F1F1; } .subject-wrapper { background: #fff; padding: 0 13px; } .subject-wrapper .more-view { float: right; } .subject-wrapper .more-view image { width: 14px; height: 13px; display: inline-block; margin-top:11px; } .scroll-view { white-space: nowrap; width:94%; padding:5px 0px 5px 0px; font-size:14px; } .scroll-view-item { height: 30px; line-height:24px; display: inline-block; position: relative; margin-right: 15px; } .scroll-view-item:last-child{ margin-right: 0; } .scroll-view-item.tips::before { content: ''; display: inline-block; background: #F7614E; width: 5px; height: 5px; border-radius: 100%; position: absolute; right: -5px; top: 0px; z-index: 1; } .scroll-view-item.active::after { content: ''; display: inline-block; background: #F7614E; border-radius: 1px; height: 3px; width: 28px; position: absolute; top: 80%; left: 50%; margin-left: -14px; } main.js onReachBottom: function () { console.log('onReachBottom'); // 如果是选择学科页面不请求数据 if (this.data.showModalStatus) { return; } let page = this.data.page + 1; this.setData({ page: page, loadMore: true }); console.log(this.data.page); if (!this.data.subId) { this.getTodayNews(); } else { this.getSubNews(this.data.subId); } } 但是没有触发该操作 该功能在iOS上有问题。下拉触底后头部学科内容全部消失，松开后又显示出来，但是头部学科内容如果小于10条，不会出现该情况， 求解。

如图：image标签，使用mode:widthFix；            image标签宽度自适应100%，正好是小数172.5            自适应高度为：375.3125            按照172.5宽度在图片中使用 bindload='onImgLoad' 原始图去计算 结果是：374.2372881355932   [图片]

瀑布流布局是一种比较流行的页面布局方式，最典型的就是Pinterest.com，每个卡片的高度不都一样，形成一种参差不齐的美感。 在HTML5中，我们可以找到很多基于jQuery之类实现的瀑布流布局插件，轻松做出这样的布局形式。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特性，在实现思路上还是有一些差别的。 今天我们就来看一下如何在小程序中去实现这种瀑布流布局： [图片] 小程序瀑布流布局 我们要实现的是一个固定2列的布局，然后将图片数据动态加载进这两列中（而加载进来的图片，会根据图片实际的尺寸，来决定到底是放在左列还是右列中）。 [代码]/* 单个图片容器的样式 */.img_item {  width: 48%;  margin: 1%;  display: inline-block;  vertical-align: top; }[代码]我们知道，在HTML中，我们要动态加载图片的话，通常会使用new Image()创建一个图片对象，然后通过它来动态加载一个url指向的图片，并获取图片的实际尺寸等信息。而在小程序框架中，并没有提供相应的JS对象来处理图片加载。其实我们可以借助wxml中的[图片]组件来完成这样的功能，虽然有点绕，但还是能满足我们的功能要求的。 [代码]<view style="display:none">  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad">image>view>[代码]我们可以在Page中通过数据绑定，来传递要加载的图片信息到wxml中，让[图片]组件去加载图片资源，然后当图片加载完成的时候，通过bindload指定的事件处理函数来做进一步处理。 我们来看一下Page文件中定义的onImageLoad函数。在其中，我们可以从传入的事件对象e上，获取到[图片]组件的丰富信息，包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸，计算出同比例缩放后的尺寸。接着，我们可以根据左右两列目前累积的内容高度，来决定把当前加载进来的图片放到哪一边。 [代码]let col1H = 0;let col2H = 0; Page({    data: {        scrollH: 0,        imgWidth: 0,        loadingCount: 0,        images: [],        col1: [],        col2: []    },    onLoad: function () {        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 = [            { pic: "../../images/1.png", height: 0 },            { pic: "../../images/2.png", height: 0 },            { pic: "../../images/3.png", height: 0 },            { pic: "../../images/4.png", height: 0 },            { pic: "../../images/5.png", height: 0 },            { pic: "../../images/6.png", height: 0 },            { pic: "../../images/7.png", height: 0 },            { pic: "../../images/8.png", height: 0 },            { pic: "../../images/9.png", height: 0 },            { pic: "../../images/10.png", height: 0 },            { pic: "../../images/11.png", height: 0 },            { pic: "../../images/12.png", height: 0 },            { pic: "../../images/13.png", height: 0 },            { pic: "../../images/14.png", 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        });    } })[代码]这里是显示在两列图片的wxml代码，我们可以看到在scroll-view>组件上，我们通过使用bindscrolltolower设置了事件监听函数，当滚动到底部的时候，会触发loadImages去再加载下一组的图片数据，这样就形成了无限的加载：/scroll-view> [代码]<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">  <view style="width:100%">    <view class="img_item">      <view wx:for="{{col1}}" wx:key="id">        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px">image>      view>    view>    <view class="img_item">      <view wx:for="{{col2}}" wx:key="id">        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px">image>      view>    view>  view>scroll-view>[代码]好了，挺简单的一个例子，如果你有更好的方法，不吝分享一下哦。 完整代码可以在我的Github下载：https://github.com/zarknight/wx-falls-layout                                                                                                                                          原作者：一斤代码（简书作者）  原文链接：http://www.jianshu.com/p/260f2623562d