web页面和微信小程序页面实现瀑布流效果
小程序实现瀑布流效果，和web页面差不多，都要经过以下步骤：
1)、加载图片，获取图片的宽高度；
2)、根据页面需要显示几列计算每列的宽度；
3)、根据图片真实宽度和每列的宽度比，计算出图片需要显示的高度；
4)、重新对图片进行定位
前端精品教程：百度网盘下载
1、web页面瀑布流效果，先看效果图（瀑布流+无限滚动加载）：
页面代码：
前端精品教程：百度网盘下载
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta charset='utf-8′> <!--声明文档使用的字符编码--> <title>瀑布流_左浮动</title> <style type="text/css"> *{margin:0;padding:0;} .container { width: 1200px; height: auto; margin: 50px auto; position: relative; } .box{ padding: 5px; box-shadow: 0 0 10px purple; border-radius: 5px; float: left; margin: 10px; } .box img { width: 200px; height: auto; } </style></head><body> <div class="container"> <div class="box"><img src="../img/0.jpg"/></div> <div class="box"><img src="../img/1.jpg"/></div> <div class="box"><img src="../img/2.jpg"/></div> <div class="box"><img src="../img/3.jpg"/></div> <div class="box"><img src="../img/4.jpg"/></div> <div class="box"><img src="../img/5.jpg"/></div> <div class="box"><img src="../img/6.jpg"/></div> <div class="box"><img src="../img/7.jpg"/></div> <div class="box"><img src="../img/8.jpg"/></div> <div class="box"><img src="../img/9.jpg"/></div> <div class="box"><img src="../img/10.jpg"/></div> <div class="box"><img src="../img/11.jpg"/></div> <div class="box"><img src="../img/12.jpg"/></div> <div class="box"><img src="../img/13.jpg"/></div> <div class="box"><img src="../img/14.jpg"/></div> <div class="box"><img src="../img/15.jpg"/></div> <div class="box"><img src="../img/16.jpg"/></div> </div> <script type="text/javascript"> var boxsHeight = []; //盒子高度存储数组 var boxWidth = 230, boxHeight = 230; window.onload = function(){ var boxs = document.getElementsByClassName('box'); var cols = Math.floor(1200.0/boxWidth); //最多几列 //offsetWidth: 包括元素的内容宽度+padding+border宽度 //存储第一行的每个盒子的高度到数组里面 for (var i = 0; i < cols; i++){ var obj = boxs[i]; //元素节点 if (i < cols){ boxsHeight.push(obj.offsetHeight); } } updateBoxFrame(cols); //从第二行开始更新元素的位置 window.onscroll = pageScroll; //设置页面滚动监听函数 pageScroll(); //先调用一次 } //获取数组中最小值的索引 function getMinHeightIndex(arr){ var minHeight = Math.min.apply(null, arr); for (var i = 0; i < arr.length; i++){ if (arr[i] == minHeight){ return i; } } } //监听页面滚动 function pageScroll(){ var parentEle = document.getElementsByClassName('container')[0]; var subEleCount = parentEle.childElementCount; //子元素个数 var lastBox = parentEle.lastElementChild; //最后一个元素 //判断是否滚动到底部 var doc = document.documentElement||document.body; console.log('滚动监听', doc.scrollTop+",", lastBox.offsetTop+", " + doc.clientHeight); if (doc.scrollTop+doc.clientHeight > lastBox.offsetTop){ //表示该新添加元素了 addBox(); //更新新添加元素的位置 updateBoxFrame(subEleCount); } } //新添加子元素 function addBox(){ var parentEle = document.getElementsByClassName('container')[0]; var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; for (var i = 0; i < arr.length; i++){ var index = parseInt(Math.random()*100%arr.length); var imgNum = arr[index]; var div = document.createElement('div'); div.setAttribute('class', 'box'); div.innerHTML = '<img src="../img/' + imgNum + '.jpg"/>' parentEle.appendChild(div); arr.splice(index, 1) } } //更新新添加元素的位置 function updateBoxFrame(startIndex){ var boxs = document.getElementsByClassName('box'); for (var i = startIndex; i < boxs.length; i++){ var obj = boxs[i]; //获取数组中最小高度的索引 var minHeightIndex = getMinHeightIndex(boxsHeight);// console.log(boxsHeight);// console.log(minHeightIndex + ", " +boxsHeight[minHeightIndex]); var boxTop = boxsHeight[minHeightIndex] + 20; var boxLeft = minHeightIndex * boxWidth; console.log(i + ', boxTop: ' + boxTop + ", boxLeft: " + boxLeft); //设置元素的定位样式 obj.style = 'position: absolute; top:' + boxTop + "px;left:" + boxLeft+"px"; boxsHeight[minHeightIndex] = boxTop + obj.offsetHeight; } } </script></body></html> |
2、小程序实现瀑布流，大致流程差不多。只不过小程序的图片的宽高度的获取没有web页面那么方便。
大概实现过程：1）、获取图片数据，页面渲染；
2）、给图片绑定加载load事件，存储每个图片的宽高度；
3）、计算每个图片的定位，重新渲染
先看小程序的效果图（瀑布流+无限循环加载）：
前端精品教程：百度网盘下载
wxml页面代码：
|
1
2
3
|
<scroll-view class='main' scroll-y='true' style="height:{{windowHeight}}px" bindscrolltolower='loadMoreImages'> <image wx:for='{{dataList}}' wx:key='item' src='{{item.src}}' style='position: absolute; top: {{item.top}}px; left: {{item.left}}px; width: {{imgWidth}}px; height: {{item.height}}px' bindload='loadImage' data-index='{{index}}' bindtap='previewImg'/></scroll-view> |
js页面代码：
|
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
|
// pages/discover/waterfall_flow/waterfall_flow.jsPage({ /** * 页面的初始数据 */ data: { dataList: [], //数据源 windowWidth: 0, //页面视图宽度 windowHeight: 0, //视图高度 imgMargin: 6, //图片边距: 单位px imgWidth: 0, //图片宽度: 单位px topArr: [0, 0], //存储每列的累积top }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.showLoading({ title: '加载中...', }) var that = this; //获取页面宽高度 wx.getSystemInfo({ success: function (res) { console.log(res) var windowWidth = res.windowWidth; var imgMargin = that.data.imgMargin; //两列，每列的图片宽度 var imgWidth = (windowWidth - imgMargin * 3) / 2; that.setData({ windowWidth: windowWidth, windowHeight: res.windowHeight, imgWidth: imgWidth }, function () { that.loadMoreImages(); //初始化数据 }); }, }) }, //加载图片 loadImage: function (e) { var index = e.currentTarget.dataset.index; //图片所在索引 var imgW = e.detail.width, imgH = e.detail.height; //图片实际宽度和高度 var imgWidth = this.data.imgWidth; //图片宽度 var imgScaleH = imgWidth / imgW * imgH; //计算图片应该显示的高度 var dataList = this.data.dataList; var margin = this.data.imgMargin; //图片间距 //第一列的累积top，和第二列的累积top var firtColH = this.data.topArr[0], secondColH = this.data.topArr[1]; var obj = dataList[index]; obj.height = imgScaleH; if (firtColH < secondColH) { //表示新图片应该放到第一列 obj.left = margin; obj.top = firtColH + margin; firtColH += margin + obj.height; } else { //放到第二列 obj.left = margin * 2 + imgWidth; obj.top = secondColH + margin; secondColH += margin + obj.height; } this.setData({ dataList: dataList, topArr: [firtColH, secondColH], }); }, //加载更多图片 loadMoreImages: function () { var imgs = [ ]; var tmpArr = []; for (let i = 0; i < 22; i++) { var index = parseInt(Math.random() * 100) % imgs.length; var obj = { src: imgs[index], height: 0, top: 0, left: 0, } tmpArr.push(obj); imgs.splice(index, 1); } var dataList = this.data.dataList.concat(tmpArr) this.setData({ dataList: dataList }, function(){ wx.hideLoading() }); }, /**预览图片 */ previewImg: function (e) { var index = e.currentTarget.dataset.index; var dataList = this.data.dataList; var currentSrc = dataList[index].src; // var srcArr = dataList.map(function (item) { // return item.src; // }); wx.previewImage({ urls: [currentSrc], }) },}) |
wxss页面代码：
|
1
2
3
4
|
.main{ width: 100%; height: 100%; position: relative; }.main image { box-shadow: 0 0 10rpx red; border-radius: 8rpx;} |
DEMO下载：https://github.com/xiaotanit/Tan_HtmlDemo
小程序瀑布流页面地址：https://github.com/xiaotanit/Tan_HtmlDemo/tree/master/wxMini/pages/discover/waterfall_flow
posted on 2018-10-18 16:04 zanguixuan 阅读(1776) 评论(0) 编辑 收藏 举报
