本文详细介绍如何利用JavaScript实现网页瀑布流图片布局及无限滚动加载功能。通过计算多栏高度最小值来动态排列图片，并结合滚动事件监听实现数据块的自动追加，从而提升用户体验。
瀑布流布局概述
本文介绍一种常见的网页展示效果：瀑布流。许多网站采用这种布局，其特点是所有图片宽度一致但高度各异，形成多栏错落排列。当用户向下滚动页面时，系统会自动加载新的数据块并追加到当前内容的末尾，实现无缝浏览体验。
核心实现原理
该效果的核心实现原理如下：
首先，需要定义每一行显示的列数。
其次，获取第一行中每个图片容器（div）的高度，并将这些高度值存入一个数组中。
接着，计算该数组中高度最小值所对应的索引位置。
然后，将第二行的第一个图片容器放置在高度最小的那个容器下方，并更新该位置的高度值，重新计算数组中的最小高度索引。
重复上述步骤，即可实现多栏布局的瀑布流视觉效果。
最后，当检测到最后一张图片已进入可视区域底部时，创建新的图片容器并添加到列表末尾，通过不断循环此过程实现无限加载。接下来将展示具体的代码实现。
HTML结构与CSS样式
<div id="main">
<div class="box">
<div class="Pic">
<img src="images/0.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/1.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/2.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/3.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/5.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/6.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/7.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/8.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/9.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/10.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/11.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/12.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/13.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/14.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/15.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/16.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/17.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/18.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/19.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/20.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/21.jpg" alt="" />
</div>
</div>
<div class="box">
<div class="Pic">
<img src="images/22.jpg" alt="" />
</div>
</div>
</div>
*{padding: 0;margin: 0;}
#main{
width: 1000px;
margin: 0 auto;
position: relative;
}
.box{
display: inline-block;
float: left;
padding: 10px 0 0 10px;
}
.Pic{
border: 1px #ccc solid;
padding: 10px;
border-radius: 8px;
}
.Pic img{
width: 162px;
}以下是相关的JavaScript代码实现：
JavaScript逻辑实现
<script>
window.onload=function(){
waterFall('main','box');
var dataInt={
"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]
};
/*滚动条滚动时触发的事件*/
window.onscroll=function(){
if(checkIsSlide()){ //结果返回是true则执行
var omain=document.getElementById('main');
/*添加div到页面上*/
for(var l=0;l<dataInt.data.length;l++){
var box=document.createElement('div');
box.className="box";
omain.appendChild(box);
var pic=document.createElement('div');
pic.className='Pic';
box.appendChild(pic);
var oimg=document.createElement('img');
oimg.src="images/"+dataInt.data[l].src;
pic.appendChild(oimg);
}
waterFall('main','box'); //新添加的div都要重新执行waterFall方法，以实现瀑布流效果
}
}
}
/*实现瀑布流效果，多栏布局*/
function waterFall(parent,pid){ //传两个参数，父元素parent和子元素pid
var oparent=document.getElementById(parent); //获取父元素
var opid=getClass(oparent,pid); //获取父元素下的classname为pid的所有子元素
var cols=Math.floor(oparent.offsetWidth/opid[0].offsetWidth); //父元素宽度/一个子元素的宽度，即一行的列数
var arrH=[]; //存放每一列的高度的数组
for(var j=0;j<opid.length;j++){
if(j<cols){
arrH.push(opid[j].offsetHeight);//把第一行的高度都放进数组中
}else{ //第二行开始
var minH=Math.min.apply(null,arrH); //计算arrH的最小值
var Index=getHIndex(arrH,minH); //使用getHIndex方法获取最小值的index值
/*把之后的div放到最小值div的下方*/
opid[j].style.position='absolute';
opid[j].style.top=minH+'px';
opid[j].style.left=opid[0].offsetWidth*Index+'px';
arrH[Index]+=opid[j].offsetHeight; //数组中的最小值加上已放在下方的div的高度值并重新循环
}
}
}
/*获取父元素下的classname为cls的所有元素*/
function getClass(parent,cls){
var obj=parent.getElementsByTagName('*');
var Clsarr=[];
for(var i=0;i<obj.length;i++){
if(obj[i].className==cls){
Clsarr.push(obj[i]);
}
}
return Clsarr;
}
/*获取arr数组中的最小值minH的Index值*/
function getHIndex(arr,minH){
for(var k=0;k<arr.length;k++){
if(arr[k]==minH){
return k;
}
}
}
/*判断当前滚动的高度时候大于最后的div出现在底部的高度值,即是否要加载*/
function checkIsSlide(){
var omain=document.getElementById('main');
var obox=getClass(omain,'box');
var lastTop=obox[obox.length-1].offsetTop+Math.floor(obox[obox.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var documentH=document.documentElement.clientHeight;
return (lastTop)<(scrollTop+documentH)?true:false;
}
</script>最终效果如下图所示：
以上是利用JavaScript实现简单瀑布流图片加载效果的完整介绍，希望能对大家有所帮助。如有疑问欢迎留言，小编会及时回复。感谢大家对本站的支持！