小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤:
1),加载图片,获取图片的宽高度;
2),根据页面需要显示几列计算每列的宽度;
3),根据图片真实宽度和每列的宽度比,计算出图片需要显示的高度;
4),重新对图片进行定位
1, web页面瀑布流效果,先看效果图(瀑布流+无限滚动加载):
页面代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元charset=' utf - 8′比;& lt; !——声明文档使用的字符编码——比;
& lt; title>瀑布流_左浮动& lt;/title>
& lt;风格类型=" text/css "比;
*{保证金:0;填充:0;}
.container {
宽度:1200 px;高度:汽车;保证金:50 px汽车;
位置:相对;
}
.box {
填充:5 px;不必:0 0 10 px紫色;border - radius: 5 px;
浮:左;保证金:10 px;
}
.box img{宽度:200 px;高度:汽车;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="容器"比;
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/0.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/1.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/2.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/3.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/4.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/5.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/6.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/7.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/8.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/9.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/10.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/11.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/12.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/13.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/14.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/15.jpg "/祝辞& lt;/div>
& lt; div类="盒子"祝辞& lt; img src=" https://www.yisu.com/img/16.jpg "/祝辞& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var boxsHeight=[];//盒子高度存储数组
var boxWidth=230, boxHeight=230;
窗口。onload=function () {
var箱=document.getElementsByClassName(盒);
var关口=Math.floor (1200.0/boxWidth);//最多几列//offsetWidth:包括元素的内容宽度+填充+边境宽度//存储第一行的每个盒子的高度到数组里面
(var=0;我& lt;关口;我+ +){
var obj=箱[我];//元素节点
如果我& lt;关口){
boxsHeight.push (obj.offsetHeight);
}
}
updateBoxFrame(关口);//从第二行开始更新元素的位置
窗口。onscroll=pageScroll;//设置页面滚动监听函数
pageScroll ();//先调用一次
}//获取数组中最小值的索引
函数getMinHeightIndex (arr) {
var minHeight=Math.min。应用(null, arr);
(var=0;我& lt;arr.length;我+ +){
如果(arr[我]==minHeight) {
返回我;
}
}
}//监听页面滚动
函数pageScroll () {
var parentEle=document.getElementsByClassName(容器)[0];
var subEleCount=parentEle.childElementCount;//子元素个数
var lastBox=parentEle.lastElementChild;//最后一个元素//判断是否滚动到底部
var doc=document.documentElement | | document.body;
控制台。日志(“滚动监听的,医生。scrollTop +”、“lastBox。offsetTop +”、“+ doc.clientHeight);
如果(doc.scrollTop + doc。clientHeight祝辞lastBox.offsetTop) {//表示该新添加元素了
addBox ();//更新新添加元素的位置
updateBoxFrame (subEleCount);
}
}//新添加子元素
函数addBox () {
var parentEle=document.getElementsByClassName(容器)[0];
var arr=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12日,13日,14日,15日,16日);
(var=0;我& lt;arr.length;我+ +){
var指数=方法(arr.length math . random () * 100%);
var imgNum=arr(指数);
var div=document.createElement (div);
div.setAttribute(“类”、“盒子”);
div.innerHTML=' & lt; img src=" https://www.yisu.com/img/+ imgNum + . jpg”/祝辞;”
parentEle.appendChild (div);
加勒比海盗。拼接(指数(1)
}
}//更新新添加元素的位置
函数updateBoxFrame (startIndex) {
var箱=document.getElementsByClassName(盒);
我对(var=startIndex;我& lt;boxs.length;我+ +){
var obj=箱[我];//获取数组中最小高度的索引
var minHeightIndex=getMinHeightIndex (boxsHeight);//console.log (boxsHeight);//控制台。日志(minHeightIndex +”、“+ boxsHeight [minHeightIndex]);
var boxTop=boxsHeight [minHeightIndex] + 20;
var boxLeft=minHeightIndex * boxWidth;
控制台。日志(i +“boxTop:”+ boxTop +“, boxLeft:”+ boxLeft);//设置元素的定位样式
obj。风格=':绝对;上图:' + boxTop +“px;左:“+ boxLeft +“px”;
boxsHeight [minHeightIndex]=boxTop + obj.offsetHeight;
}
}
& lt;/script>
& lt;/body>
& lt;/html>
