2.2。定义基本的cssstyles.container{.container{width:100%;padding:10px10px;position:relative;}.list{float:left;width:100px;padding:10px;bottom:10px;}.listimg{width:100px;}2.3.js动态计算加载项的样式。functionwater_fall(parent_selector,box_selector){letboxElem=document.getElementsByClassName(box_selector);让boxWidth=boxElem[0].offsetWidth;让cols=2；让height_arr=[];for(leti=0;i3.2.定义基本的wxssstyle.content_list{position:relative;}.list{width:350rpx;min-height:200rpx;}.img_item{width:100%;}这里有个区别，就是我没有设置padding对于.list类，因为微信小程序下无法操作节点获取样式。后面我们会根据图片的宽度动态计算图片左右两侧和左列的padding。同时这里图片的单位是rpx。主要是适配不同的屏幕终端。3.3.js动态计算加载项的样式。有两种选择。第一个定义了一个用于存储图片的隐藏字段。图片加载完成后，绑定loading事件，获取图片的宽高。主要js代码如下：onImageLoad:function(e){letimageId=e.currentTarget.id;让oImgW=e.detail.width;//原图宽度letoImgH=e.detail.height;//原图高度letimgWidth=(this.data.winWidth-20)*0.48;让规模=imgWidth/oImgW;//比例计算letimgHeight=scale*oImgH;让imgObj={id:imageId,宽度:imgWidth,height:imgHeight};imgLen++;for(leti=0;i