基于mpvue的小程序瀑布流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<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>