2017年6月14日，微信小程序瀑布流已经是当下最热门的话题，下面将从多方面来谈谈微信小程序瀑布流布局以及无限加载操作方法相关的内容。
6月14日消息，据彭博社报道，为了与新东家沃尔玛（Walmart）融合得更加顺畅，Jet.com（去年8月被沃尔玛以33亿美元收购）正计划逐步剔除自己平台上所售的Costco旗下品牌产品。
6月18日，永辉将在福州开出第一家永辉生活店。值得注意的是，这也是永辉首家24小时营业门店。据了解，这家24小时门店商品由永辉物流统一配送，没有熟食但提供蔬菜水果以及冷冻冰鲜类商品。
瀑布流布局是一种比较流行的页面布局方式，最典型的就是Pinterest.com，每个卡片的高度不都一样，形成一种参差不齐的美感。
在HTML5中，我们可以找到很多基于jQuery之类实现的瀑布流布局插件，轻松做出这样的布局形式。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特性，在实现思路上还是有一些差别的。
今天我们就来看一下如何在小程序中去实现这种瀑布流布局：
小程序瀑布流布局
我们要实现的是一个固定2列的布局，然后将图片数据动态加载进这两列中(而加载进来的图片，会根据图片实际的尺寸，来决定到底是放在左列还是右列中)。
/* 单个图片容器的样式 */.img_item { width: 48%; margin: 1%; display: inline-block; vertical-align: top;
}
我们知道，在HTML中，我们要动态加载图片的话，通常会使用new Image()创建一个图片对象，然后通过它来动态加载一个url指向的图片，并获取图片的实际尺寸等信息。而在小程序框架中，并没有提供相应的JS对象来处理图片加载。其实我们可以借助wxml中的
我们可以在Page中通过数据绑定，来传递要加载的图片信息到wxml中，让
我们来看一下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; tShopfas.setData({ scrollH: scrollH, imgWidth: imgWidth
}); //加载首组图片
tShopfas.loadImages();
}
})
}, onImageLoad: function (e) { let imageId = e.currentTarget.id; let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
let imgWidth = tShopfas.data.imgWidth; //图片设置的宽度
let scale = imgWidth / oImgW; //比例计算
let imgHeight = oImgH * scale; //自适应高度
let images = tShopfas.data.images; let imageObj = null; for (let i = 0; i
imageObj = img; break;
}
}
imageObj.height = imgHeight; let loadingCount = tShopfas.data.loadingCount - 1; let col1 = tShopfas.data.col1; let col2 = tShopfas.data.col2; //判断当前图片添加到左列还是右列
if (col1H
col1H += imgHeight;
col1.push(imageObj);
} else {
col2H += imgHeight;
col2.push(imageObj);
} let data = { loadingCount: loadingCount, col1: col1, col2: col2
}; //当前这组图片已加载完毕，则清空图片临时加载区域的内容
if (!loadingCount) {
data.images = [];
} tShopfas.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[i].id = baseId + "-" + i;
} tShopfas.setData({ loadingCount: images.length, images: images
});
}
})
这里是显示在两列图片的wxml代码，我们可以看到在
-
微信小程序商城系统开发其实很简单
微信小程序商城系统开发其实很简单，只需要五步就可以完成，整个过程包括开发、上线、发布都可以轻松搞定...详情
-
想了解更多微信小程序开发和微信小程序大全都可以进入微信小程序商城系统开发了解。
第二部分：如何开通一个小商店
<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。
