沈阳网站建设公众号,微信公众号平台怎么上传wordpress,wordpress网站标签logo,网站建设咋打开自己网站主页网址导语#xff1a;有时候展示图片等内容#xff0c;会遇到图片高度不一致的情况#xff0c;这时候就不能使用等高双列或多列展示了#xff0c;这时候会用到瀑布流的页面布局#xff0c;下面就一起探讨一下瀑布流的实现方法。 目录
准备工作原理分析实战演练案例展示
准备工… 导语有时候展示图片等内容会遇到图片高度不一致的情况这时候就不能使用等高双列或多列展示了这时候会用到瀑布流的页面布局下面就一起探讨一下瀑布流的实现方法。 目录
准备工作原理分析实战演练案例展示
准备工作
在pages/index文件夹下面新建一个waterfall.vue的组件按照前面文章所说的页面结构编写好预定的瀑布流案例页面在网上找几张免费的图片素材
原理分析
主要是根据图片的高度自动比较每列的总高度根据uni.getImageInfo获取到图片高度然后哪列低就给哪列补充图片直至图片列表循环完毕。
实战演练
模板使用
下面就是循环列和图片。
view classwaterfall-pageviewclasswaterfall-page-columnv-for(item, index) in waterfall.columnList:keyindexrefcolumnviewclasswaterfall-page-itemv-for(pItem, pIndex) in item:keypIndeximage classwaterfall-page-img :srcpItem modewidthFix/image/view/view
/view样式编写
.waterfall-page {display: flex;align-items: flex-start;.waterfall-page-column {box-sizing: border-box;flex: 1;padding: 0 10rpx;width: 0;.waterfall-page-item {margin-bottom: 10rpx;.waterfall-page-img {display: inline-block;width: 100%;}}}
}脚本使用
定义数据
// 瀑布流信息
const waterfall reactive({// 图片列表imgList: [/static/image/waterfall/pic-01.jpg,/static/image/waterfall/pic-07.jpg,/static/image/waterfall/pic-03.jpg,/static/image/waterfall/pic-07.jpg,/static/image/waterfall/pic-05.jpg,/static/image/waterfall/pic-07.jpg,/static/image/waterfall/pic-01.jpg,/static/image/waterfall/pic-03.jpg,/static/image/waterfall/pic-07.jpg,],columnList: [], // 每列图片columnHeight: [], // 每列图片高度columnCount: 2, // 总列数
});初始化数据
// 初始化数据
function initData() {for (var i 0; i waterfall.columnCount; i) {waterfall.columnList.push([]);waterfall.columnHeight.push(0);}
}计算方法
// 设置瀑布流布局
async function setWaterfallLayout() {for (var i 0; i waterfall.imgList.length; i) {let item waterfall.imgList[i];try {let imgInfo await uni.getImageInfo({src: item,}),h imgInfo.height;for (let j 0; j waterfall.columnCount - 1; j) {let prevIndex j,nextIndex j 1;if (waterfall.columnHeight[prevIndex] waterfall.columnHeight[nextIndex]) {waterfall.columnList[prevIndex].push(item);waterfall.columnHeight[prevIndex] h;} else {waterfall.columnList[nextIndex].push(item);waterfall.columnHeight[nextIndex] h;}}} catch (error) {console.log(error);}}
}案例展示
h5 端效果 小程序端效果 APP 端效果
最后
以上就是自定义多列瀑布流组件的主要内容有不足之处请多多指正。
