原生js实现瀑布流布局
程序员文章站
2024-01-12 19:45:28
用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释
效果如图：
用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释
效果如图：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>瀑布流布局-js实现</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
position: relative;/*整体相对定位，因为每个小图片盒子的位置是通过计算再由绝对定位放置，是需要相对于main盒子*/
}
.box{
padding: 15px 0 0 15px;/*padding为内边距，后面js获取的高度包括padding的距离*/
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oparent=document.getelementbyid("main");
var oboxs=oparent.getelementsbyclassname("box");
waterfall('main','box');//调用瀑布布局的函数
var dataint={"data":[{"src":'23.jpg'},{"src":'24.jpg'},{"src":'25.jpg'}]}//模拟出要加载的图片
window.onscroll=function(){
if(checkscrollslide()){//如果调用函数的返回结果为true
//将数据块渲染到当前页面底部
for(var i=0;i<dataint.data.length;i++){//dataint对象的data属性的长度
var obox=document.createelement('div');
obox.classname='box';
oparent.appendchild(obox);//添加到父元素的最后
var opic=document.createelement('div');
opic.classname='pic';
obox.appendchild(opic);
var oimg=document.createelement('img');
oimg.src="img/"+dataint.data[i].src;
opic.appendchild(oimg);
}
waterfall('main','box');
};
}
function waterfall(parent,box){
var oparent=document.getelementbyid(parent);
var oboxs=oparent.getelementsbyclassname(box);
var oboxw=oboxs[0].offsetwidth;//计算每个box的宽度
//计算整个页面显示的列数（页面宽/box的宽）
var cols=math.floor(document.documentelement.clientwidth/oboxw);
//设置main的宽,居中
oparent.style.csstext='width:'+oboxw*cols+'px;margin:0 auto;';
var harr=[];//存放每一列高度的数组
for(var i=0;i<oboxs.length;i++){
if(i<cols){
harr.push(oboxs[i].offsetheight);//将第一行的各个高度加到数组中
}else{
var minh=math.min.apply(null,harr);//apply方法可以改变数组的指向,因为math.min方法不支持数组
var index=getminhindex(harr,minh);
oboxs[i].style.position='absolute';
oboxs[i].style.top=minh+'px';
oboxs[i].style.left=oboxs[index].offsetleft+'px';
harr[index]+=oboxs[i].offsetheight;
}
}
}
function getminhindex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
//检测是否具备了滚动条加载数据块的条件
function checkscrollslide(){
//最后一个盒子的距顶部的高度加上自身高度的一半
var lastboxh=oboxs[oboxs.length-1].offsettop+ math.floor(oboxs[oboxs.length-1].offsetheight/2);
//页面滚走的距离
var scrolltop=document.body.scrolltop||document.documentelement.scrolltop;
//当前浏览器窗口可视区域高度
var height=document.body.clientheight||document.documentelement.clientheight;
return (lastboxh<scrolltop+height) ? true : false;
}
}
</script>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/0.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/7.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/8.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/10.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/20.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/21.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/22.jpg" />
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。