小程序实现瀑布流效果，和web页面差不多，都要经过以下步骤：
1)、加载图片，获取图片的宽高度；
2)、根据页面需要显示几列计算每列的宽度；
3)、根据图片真实宽度和每列的宽度比，计算出图片需要显示的高度；
4)、重新对图片进行定位
1、web页面瀑布流效果，先看效果图（瀑布流+无限滚动加载）：
页面代码：
<!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> <div><img src="https://www.jb51.net/img/0.jpg"/></div> <div><img src="https://www.jb51.net/img/1.jpg"/></div> <div><img src="https://www.jb51.net/img/2.jpg"/></div> <div><img src="https://www.jb51.net/img/3.jpg"/></div> <div><img src="https://www.jb51.net/img/4.jpg"/></div> <div><img src="https://www.jb51.net/img/5.jpg"/></div> <div><img src="https://www.jb51.net/img/6.jpg"/></div> <div><img src="https://www.jb51.net/img/7.jpg"/></div> <div><img src="https://www.jb51.net/img/8.jpg"/></div> <div><img src="https://www.jb51.net/img/9.jpg"/></div> <div><img src="https://www.jb51.net/img/10.jpg"/></div> <div><img src="https://www.jb51.net/img/11.jpg"/></div> <div><img src="https://www.jb51.net/img/12.jpg"/></div> <div><img src="https://www.jb51.net/img/13.jpg"/></div> <div><img src="https://www.jb51.net/img/14.jpg"/></div> <div><img src="https://www.jb51.net/img/15.jpg"/></div> <div><img src="https://www.jb51.net/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页面代码：