本文是基于mpvue框架的小程开发，所以语法和原生的小程序语法有所区别。
思路是将数据分为左右两列，基数和偶数列。通过左右两列来进行渲染进行动态渲染的瀑布流。代码如下：
<template>
<div class="page">
<div style='display: none'>
<img v-for='(item, index) in dataList' :key='item' :src='item.src' @load='loadImage' :data-index='index' alt=""/>
</div>
<!-- @scrolltolower='loadMoreImages'-->
<scroll-view class='main' scroll-y='true' :style="{height:windowHeight+'px'}" @scrolltolower='loadMoreImages'>
<div class='view'>
<div class="content" v-for='(item, index) in firstList' :key='index'
:style="{ width: imgWidth+'px', height:(item.height + 55)+'px', marginTop: imgMargin+'px',marginLeft:imgMargin + 'px'}">
<div class="img-content" :style="{height:item.height + 'px'}">
<img :src='item.src'
class="image"
:data-index='index' data-type='1'
@click='previewImg'
alt=""/>
</div>
<div class="text">{{item.title}}</div>
<div class="price">{{item.price}}</div>
</div>
</div>
<div class='view'>
<div class="content" v-for='(item, index) in secondList'
:style="{marginLeft:(imgMargin/2)+'px', width: imgWidth+'px', height:(item.height + 55)+'px',marginTop: imgMargin+'px'}"
:key='index'>
<div class="img-content" :style="{height:item.height+'px'}">
<img :src='item.src'
class="image"
:data-index='index' data-type='2'
@click='previewImg'
alt=""/>
</div>
<div class="text">{{item.title}}</div>
<div class="price">{{item.price}}</div>
</div>
</div>
</scroll-view>
</div>
</template>
<script>
export default {
name: 'flow',
data () {
return {
dataList: [], // 数据源
firstList: [], // 第一列数组
secondList: [], // 第二列数组
windowWidth: 0, // 页面视图宽度
windowHeight: 0, // 视图高度
imgMargin: 10, // 图片边距: 单位px
imgWidth: 0, // 图片宽度: 单位px
topArr: [0, 0] // 存储每列的累积top
}
},
methods: {
// 加载图片
loadImage: function (e) {
let index = e.currentTarget.dataset.index // 图片所在索引
let imgW = e.mp.detail.width
let imgH = e.mp.detail.height // 图片实际宽度和高度
let imgWidth = this.imgWidth // 图片宽度
let imgScaleH = imgWidth / imgW * imgH // 计算图片应该显示的高度
let dataList = this.dataList
let margin = this.imgMargin // 图片间距
// 第一列的累积top，和第二列的累积top
let firstColH = this.topArr[0]
let secondColH = this.topArr[1]
let firstList = this.firstList
let secondList = this.secondList
let obj = dataList[index]
obj.height = imgScaleH
if (firstColH <= secondColH) { // 表示新图片应该放到第一列
firstColH += margin + obj.height
firstList.push(obj)
} else { // 放到第二列
secondColH += margin + obj.height
secondList.push(obj)
}
this.dataList = dataList
this.firstList = firstList
this.secondList = secondList
this.topArr = [firstColH, secondColH]
},
// 加载更多图片
loadMoreImages: function () {
let index
let imgs = [
{src: 'https://yanxuan.nosdn.127.net/8ce0e3cb78fd046ec925950dacfadfc6.jpg?imageView&quality=95&thumbnail=1090x310', title: '10月促销产品'},
{src: 'https://yanxuan-item.nosdn.127.net/9e35e1576fa25432f733ba8ff9e2e1b1.jpg?quality=95&thumbnail=245x245&imageView', title: '徐香 绿心猕猴桃 4斤装', price: '￥59'},
{src: 'https://yanxuan-item.nosdn.127.net/b897a378999e38d063e7f83da04f03c0.jpg?quality=95&thumbnail=245x245&imageView', title: '金都一号 红心火龙果', price: '￥68'},
{src: 'https://yanxuan-item.nosdn.127.net/86e0f7ffe73ef57284b4e37d175b904f.jpg?quality=95&thumbnail=245x245&imageView', title: '玲珑柑普茶', price: '￥85'},
{src: 'https://yanxuan-item.nosdn.127.net/f68df756cd8e554081d84f4add5faa49.jpg?quality=95&thumbnail=245x245&imageView', title: '什锦果仁 500克', price: '￥118'},
{src: 'https://yanxuan-item.nosdn.127.net/510c0f1b1ebe7397fc6e6fc7ffb2fa2f.jpg?quality=95&thumbnail=245x245&imageView', title: '突尼斯软籽石榴', price: '￥89'},
{src: 'https://yanxuan-item.nosdn.127.net/93ca45751fd07c5f56ed747f0973af02.jpg?quality=95&thumbnail=245x245&imageView', title: '冻干银耳汤 15克*10袋', price: '￥49'},
{src: 'https://yanxuan-item.nosdn.127.net/8b633812b32f9d1bf84c3d781d715d39.jpg?quality=95&thumbnail=245x245&imageView', title: '特型黄酒 500毫升', price: '￥68'},
{src: 'https://yanxuan-item.nosdn.127.net/9ee4dbb465f59ff3ed74de767635db80.jpg?quality=95&thumbnail=245x245&imageView', title: '半甜型黄酒 720毫升', price: '￥68'},
{src: 'https://yanxuan-item.nosdn.127.net/4801da00e3c6f21dcf28a761becfaf43.jpg?quality=95&thumbnail=245x245&imageView', title: '进口澳橙 5斤装', price: '￥75'},
{src: 'https://yanxuan-item.nosdn.127.net/5fc3f5a6e943548f7c3fa548d0849973.jpg?quality=95&thumbnail=245x245&imageView', title: '黄金百香果 16粒装', price: '￥65'},
{src: 'https://yanxuan-item.nosdn.127.net/ea4ee8d877a7e9d5e0394582de686883.jpg?quality=95&thumbnail=245x245&imageView', title: '996五宝茶', price: '￥109'},
{src: 'https://yanxuan-item.nosdn.127.net/e4ec95f048a00375fc014e09bcc7b730.jpg?quality=95&thumbnail=245x245&imageView', title: '马来制造 即食燕窝 70克*6瓶 30%', price: '￥258'},
{src: 'https://yanxuan-item.nosdn.127.net/773f5195eeaf4fdbc377a1b6add05b60.jpg?quality=95&thumbnail=245x245&imageView', title: '常温酸牛奶200克*12盒*2提', price: '￥95'},
{src: 'https://yanxuan-item.nosdn.127.net/6444b1aeab9a254a437b6699be590e94.jpg?quality=95&thumbnail=245x245&imageView', title: '鲜萃每日坚果 25克*7袋', price: '￥39'},
{src: 'https://yanxuan-item.nosdn.127.net/49e6999ee142aac5b14100312bfb77cc.jpg?quality=95&thumbnail=245x245&imageView', title: '黄油华夫饼 1千克', price: '￥49'},
{src: 'https://yanxuan-item.nosdn.127.net/ba156c6607c6b72fdddb8ce5785e76f8.jpg?quality=95&thumbnail=245x245&imageView', title: '黄桃罐头 425克*6罐', price: '￥49'},
{src: 'https://yanxuan-item.nosdn.127.net/1e249048fbbe1b8a39ee2f395795ddae.jpg?quality=95&thumbnail=245x245&imageView', title: '阿胶糕礼盒 360克', price: '￥139'},
{src: 'https://yanxuan-item.nosdn.127.net/ed304632e64555861ed05470f5bdccb0.jpg?quality=95&thumbnail=245x245&imageView', title: '压榨一级葵花籽油 5升', price: '￥68'},
{src: 'https://yanxuan-item.nosdn.127.net/8ab83ab6baa2ad61861ebb7d9fe27350.jpg?quality=95&thumbnail=245x245&imageView', title: '每日坚果藜麦谷物燕麦片 800克', price: '￥68'},
{src: 'https://yanxuan-item.nosdn.127.net/855e3be6f93c1fd5bf8b8ac2791205f6.jpg?quality=95&thumbnail=245x245&imageView', title: '缤纷西点 冷冻甜品组合（3味装）', price: '￥88'},
{src: 'https://yanxuan-item.nosdn.127.net/1f4a9294190ec16d4a55b6cae6e663bb.jpg?quality=95&thumbnail=245x245&imageView', title: '阴阳师 妙曲奇遇记曲奇礼盒 520克', price: '￥98'},
{src: 'https://yanxuan-item.nosdn.127.net/d513a3a6b19825a4540b4916e78b8467.jpg?quality=95&thumbnail=245x245&imageView', title: '柔风黄油曲奇', price: '￥98'},
{src: 'https://yanxuan-item.nosdn.127.net/08cb8ea2f4f302b13b741f1c53694753.jpg?quality=95&thumbnail=245x245&imageView', title: '蔬菜风味牛奶面包 胡萝卜味 360克', price: '￥24'},
{src: 'https://yanxuan-item.nosdn.127.net/5f25e2a3f98ec3d6d0f0a72628f8163c.jpg?quality=95&thumbnail=245x245&imageView', title: '酥皮豆沙馅饼 45克*6枚', price: '￥32'},
{src: 'https://yanxuan-item.nosdn.127.net/ad79bc3948997f7c41d61b60fee4ff33.jpg?quality=95&thumbnail=245x245&imageView', title: '四季之歌绿豆糕 240克（12枚入）', price: '￥26'},
{src: 'https://yanxuan-item.nosdn.127.net/d64ba44b2b3275ea500e5668ea818d03.jpg?quality=95&thumbnail=245x245&imageView', title: '千层星云酥 60克*3枚', price: '￥26'},
{src: 'https://yanxuan-item.nosdn.127.net/2ac4f976aa7311ffa4a37bdf0bfa7f4b.jpg?quality=95&thumbnail=245x245&imageView', title: '法式乳酪 50克*6枚', price: '￥38'},
{src: 'https://yanxuan-item.nosdn.127.net/9fe97b5cfe92d26637f4614a5279282b.jpg?quality=95&thumbnail=245x245&imageView', title: '小时光 切片曲奇 17克*10袋', price: '￥19'},
{src: 'https://yanxuan-item.nosdn.127.net/adeb97265ccace758f79da03e1f8f6db.jpg?quality=95&thumbnail=245x245&imageView', title: '咸蛋黄饼干 10克*16袋', price: '￥19'},
{src: 'https://yanxuan-item.nosdn.127.net/fcf5e9503dd1658cf28ea46644a5a82e.jpg?quality=95&thumbnail=245x245&imageView', title: '切达奶酪曲奇 9克*20袋', price: '￥19'},
{src: 'https://yanxuan.nosdn.127.net/621c2cbc08492b29255b3fdb5e94f19b.jpg?imageView&quality=95&thumbnail=1090x310', title: '10月新品速递', price: '每月十七号上新'}
]
for (let i = 0; i < 22; i++) {
let randomNum = Math.random() * 100
index = parseInt(randomNum) % imgs.length
imgs[index].height = 0
imgs.splice(index, 1)
}
this.dataList = imgs
wx.hideLoading()
},
/** 预览图片 */
previewImg: function (e) {
let index = e.currentTarget.dataset.index
let currentSrc = ''
switch (e.currentTarget.dataset.type) {
case '1':
currentSrc = this.firstList[index].src
break
case '2':
currentSrc = this.secondList[index].src
}
wx.previewImage({
urls: [currentSrc]
})
}
},
onLoad () {
wx.showLoading({
title: '加载中...'
})
let that = this
// 获取页面宽高度
wx.getSystemInfo({
success: function (res) {
console.log(res)
let windowWidth = res.windowWidth
let imgMargin = that.imgMargin
// 两列，每列的图片宽度
let imgWidth = (windowWidth - imgMargin * 3) / 2
that.windowWidth = windowWidth
that.windowHeight = res.windowHeight
that.imgWidth = imgWidth
that.loadMoreImages() // 初始化数据
}
})
}
}
</script>
<style scoped lang="scss">
.page {
width: 100%;
}
.main{
width: 100%;
height: 100%;
.view {
display: inline-block !important;
position: relative;
vertical-align: top;
width: 50%;
.content {
box-shadow: 0 0 5px silver;
border-radius: 4px;
.img-content {
.image {
width: 100%;
height: 100%;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
}
.text {
padding: 5px 8px 0 8px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break:break-all;
}
.price {
font-size: 14px;
color: #df4416;
padding: 5px 8px 5px 8px;
}
}
}
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
