效果图来了，看，看，外面的世界多美，效果图展示瀑布流布局&&懒加载效果数据来源和图片资料为张新旭的博客。首先说一下我们图片的链接格式。所有链接格式为http://cued.xunlei.com/demos/publ/img/P_${name}.jpg。我们只需要改变name的值。name的值小于10时格式为00x，如002、003，大于10时为023。定义瀑布流布局是一种比较流行的页面布局方式。最早采用这种布局的网站是Pinterest。图片宽度固定，高度自动，产生不均匀的美感。原理原理很简单，主要分为以下几步：1.定义高度数组和列数；定义元素的top和left值4.更新height数组很重要，将最小高度加到当前元素的高度知道原理了，代码应该怎么写？这里以web端为例，大致如下letheightArr=[]letcol=2letallBox=document.querySelectorAll('.box')//获取所有框for(letiinallBox){letboxWidth=allBox[0].offsetWidth//得到相同的框宽直接取第一个letboxHeight=allBox[i].offsetHeightif(iwxss.container{column-count:2;/*设置列数*/column-gap:2rpx;padding-left:8rpx;}image{宽度:182px;box-shadow:2px2px4pxrgba(0,0,0,.4);}js只是获取数据，这里不再赘述。节点信息小程序可以通过WXML节点信息API获取元素信息。接下来，让我们编写代码。wxmlwxss.container{位置：相对；显示：流根；}.box{浮动：左；显示：弹性；左边距：5rpx；盒子阴影：2rpx2rpx5rpxrgba(0,0,0,.3);边框：1rpx实心#ccc；框大小：边框框；padding:10px;}.box:nth-child(2){margin-left:12rpx;}image{width:100%;}js图片链接为http://cued.xunlei.com/demos/publ/img/P_${name}.jpg，改个名字先处理我们的数据//创建一个长度为30的数组constmockData=()=>{returnArray.from(Array(30).keys()).map(item=>{if(item<10){return'00'+item}else{return'0'+item}})}//展开我们需要的数据constcreateGroup=()=>{letgroup=[]letlist=mockData()list.forEach(item=>{group.push({name:item,position:'static',top:'',left:''})})returngroup}然后进行瀑布流布局，主要代码如下load(e){//监听图片加载后的图片高度this.setData({height:[...this.data.height,e.detail.height]})this.showImg()//调用渲染函数},showImg(){letheight=this.data.heightif(height.lenth!=this.data.group.legth){//确保所有图片都加载完毕return}setTimeout(()=>{//异步执行wx.createSelectorQuery().selectAll('.box').boundingClientRect((ret)=>{letcols=2vargroup=this.data.groupvarheightArr=[];for(vari=0;igetImgData(item)))可以这样写，怎么回事，毕竟人家做了反爬，恭喜你中奖了，换个ip试试（可以把代码放在服务器上，或者换个Wi-Fi），其实我们只需要爬一次，为什么生成后文件还在爬呢？完整代码请点击github，我们返回小程序。此时接口返回的数据如下。你可以看到每张图片都有一个高度。接下来，我们实现瀑布流布局。等一下，我们来做瀑布流布局的懒加载。关于小程序的延迟加载，点击了解更多。如何实现？主要分为两步1.布局元素瀑布流2.创建IntersectionObserver并进行懒加载先开始我们的布局wxml上面我们通过wx-if判断图片是否加载完成showfield，用一个view组件占位，然后把showfield改成显示图片的js我们用了两个for循环，先布局letcols=2letlist=this.data.listletheightArr=[];for(letiinlist){varboxHeight=list[i].heightif(i{if(ret.intersectionRatio>0){列表[i].show=true}this.setData({list})})}最后我们通过三个方法完成了小程序的瀑布流布局和基于瀑布流的懒加载也完成了。可以发现使用css是最方便的。虽然小程序不能操作DOM，但是我们改变数据，改变概念就像改变DOM一样。小程序的开发还是很爽的。的。最后祝大家周末愉快。知乎
