JS 瀑布流效果

准备工作: 选择20张图片保存在images文件夹;

1.html部分:

 <!DOCTYPE html>
<html>
<head>
    <title>瀑布流</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <script type="text/javascript" src = "./js/index.js"></script>
</head>
<body>
    <div id = "main">
        <div class="box">
            <div class = "pic">
                <img src="./images/0.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/9.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/10.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/11.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/12.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/13.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/14.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/15.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/16.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/17.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/18.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/19.jpg">
            </div>
        </div>
        <div class="box">
            <div class = "pic">
                <img src="./images/20.jpg">
            </div>
        </div>  
    </div>
</body>
</html>

2.css部分:

 *{
    margin: 0;
    padding: 0;
}
 
#main{
    position: relative;
}
 
.box{
    padding: 15px 0 0 15px;
    float: left;
}
 
.pic{
    padding: 10px;
    border: 1px solid #ccc;
    /*div 边宽的圆角模式*/
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}
 
img{
    width: 200px;
}

3.js 部分:

 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'},{"src":'8.jpg'},{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'},{"src":'12.jpg'},{"src":'13.jpg'},{"src":'14.jpg'},{"src":'15.jpg'},{"src":'16.jpg'},{"src":'17.jpg'},{"src":'18.jpg'},{"src":'19.jpg'},{"src":'20.jpg'}]};
    // ********判断是否具备加载条件*********
    window.onscroll = function(){   
        if(checkScrollSlide()){
            var oParent=document.getElementById('main');
            //将数据块渲染到当前页面的尾部
            for(var i=0;i<dataInt.data.length;i++){
                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='./images/'+dataInt.data[i].src;
                oPic.appendChild(oImg);
            }
            waterfall('main','box');
        }
    }
}
 
function waterfall(parent,box){
    var oParent=document.getElementById(parent);
    //1.获取所有的class=box的div
    var oBoxs=getByClass(oParent,box);
    //2.获取盒子的宽度
    var oBoxW=oBoxs[0].offsetWidth;
    //3.获取一排盒子的个数
    var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
    //4.设置main的宽度,做到页面居中效果
    oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
 
    // *******找到最矮图片*******
    // 1.存储第一排的高度
    var hArr=[];
    for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
            //2.添加数组元素
            hArr.push(oBoxs[i].offsetHeight);
        }else{
            //3.找出数组中最小的(数组使用apply)
            var minH=Math.min.apply(null,hArr);
            //4.制作找出最小值索引的函数
            var index=getMinhIndex(hArr,minH);
            //5.添加第二列的图片位置
            oBoxs[i].style.position='absolute';
            oBoxs[i].style.top=minH+'px';
            // 索引*一个盒子的宽度
            // oBoxs[i].style.left=oBoxW*index+'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;
        }
    }
}
 
//获取所有的box
function getByClass(parent,clsName){
    var boxArr=new Array();
    var oElemnets=parent.getElementsByTagName('*');
    for(var i=0;i<oElemnets.length;i++){
        if(oElemnets[i].className==clsName){
            boxArr.push(oElemnets[i]);//数组值的添加
        }
    }
    return boxArr;
}
 
//检测是否符合加载数据块的条件
function checkScrollSlide(){
    var oParent=document.getElementById('main');
    var oBoxs=getByClass(oParent,'box');
    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;
 
}

上一篇服务器：同域名搭建多个项目

下一篇文字省略出现 box-orient

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961500.html

posted @ 2022-12-06 22:22 轻风细雨_林木木阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

JS 瀑布流效果

公告

搜索

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<title>瀑布流</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
	<script type="text/javascript" src = "./js/index.js"></script>
	</head>
	<body>
	<div id = "main">
	<div class="box">
	<div class = "pic">
	<img src="./images/0.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/1.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/2.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/3.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/4.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/5.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/6.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/7.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/8.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/9.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/10.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/11.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/12.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/13.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/14.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/15.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/16.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/17.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/18.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/19.jpg">
	</div>
	</div>
	<div class="box">
	<div class = "pic">
	<img src="./images/20.jpg">
	</div>
	</div>
	</div>
	</body>
	</html>

	*{
	margin: 0;
	padding: 0;
	}

	#main{
	position: relative;
	}

	.box{
	padding: 15px 0 0 15px;
	float: left;
	}

	.pic{
	padding: 10px;
	border: 1px solid #ccc;
	/div 边宽的圆角模式/
	border-radius: 5px;
	box-shadow: 0 0 5px #ccc;
	}

	img{
	width: 200px;
	}

	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'},{"src":'8.jpg'},{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'},{"src":'12.jpg'},{"src":'13.jpg'},{"src":'14.jpg'},{"src":'15.jpg'},{"src":'16.jpg'},{"src":'17.jpg'},{"src":'18.jpg'},{"src":'19.jpg'},{"src":'20.jpg'}]};
	// ******判断是否具备加载条件*******
	window.onscroll = function(){
	if(checkScrollSlide()){
	var oParent=document.getElementById('main');
	//将数据块渲染到当前页面的尾部
	for(var i=0;i<dataInt.data.length;i++){
	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='./images/'+dataInt.data[i].src;
	oPic.appendChild(oImg);
	}
	waterfall('main','box');
	}
	}
	}

	function waterfall(parent,box){
	var oParent=document.getElementById(parent);
	//1.获取所有的class=box的div
	var oBoxs=getByClass(oParent,box);
	//2.获取盒子的宽度
	var oBoxW=oBoxs[0].offsetWidth;
	//3.获取一排盒子的个数
	var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
	//4.设置main的宽度,做到页面居中效果
	oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';

	// *****找到最矮图片*****
	// 1.存储第一排的高度
	var hArr=[];
	for(var i=0;i<oBoxs.length;i++){
	if(i<cols){
	//2.添加数组元素
	hArr.push(oBoxs[i].offsetHeight);
	}else{
	//3.找出数组中最小的(数组使用apply)
	var minH=Math.min.apply(null,hArr);
	//4.制作找出最小值索引的函数
	var index=getMinhIndex(hArr,minH);
	//5.添加第二列的图片位置
	oBoxs[i].style.position='absolute';
	oBoxs[i].style.top=minH+'px';
	// 索引*一个盒子的宽度
	// oBoxs[i].style.left=oBoxW*index+'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;
	}
	}
	}

	//获取所有的box
	function getByClass(parent,clsName){
	var boxArr=new Array();
	var oElemnets=parent.getElementsByTagName('*');
	for(var i=0;i<oElemnets.length;i++){
	if(oElemnets[i].className==clsName){
	boxArr.push(oElemnets[i]);//数组值的添加
	}
	}
	return boxArr;
	}

	//检测是否符合加载数据块的条件
	function checkScrollSlide(){
	var oParent=document.getElementById('main');
	var oBoxs=getByClass(oParent,'box');
	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;

	}