瀑布流实现

tongluren381

于 2019-12-30 15:56:47 发布

阅读量306

点赞数

分类专栏：动画 jquery 文章标签：图片瀑布流

本文链接：https://blog.csdn.net/tongluren381/article/details/103767683

版权

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>瀑布流效果特效代码</title>
	<script src="js/jQuery3.4.1.slim.min.js"></script>


	<script  src="js/index3.js"></script>
    <style type="text/css">
        /* 标签重定义 */
        body{padding:0;margin:0;}
        img{border:none;}
        a{text-decoration:none;color:#444;}
        a:hover{color:#999;}
        #title{width:600px;margin:20px auto;text-align:center;}
       
        /* wrap */
        #wrap{width:auto;height:auto;margin:0 auto;position:relative;}
        #wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
        #wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
        #wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
        #wrap .box .info .pic img{width:260px;border-radius:3px;}
        #wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}

    </style>
</head>
<body>
<section id="title">
    <h2>js瀑布流效果特效代码</h2>
</section>

<div id="wrap">
	
    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/1.jpg"></div>
            <div class="title"><a href="www.baidu" target="_blank"> 瀑布流效果</a></div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/2.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/3.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/4.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/5.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/6.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/7.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/8.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/9.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

    <div class="box">
        <div class="info">
            <div class="pic"><img src="images/10.jpg"></div>
            <div class="title">瀑布流效果</div>
        </div>
    </div>

</div>


</body>
</html>

js代码

//一定要用window.onload不能用$(function(){})
var data = [{'src':'1.jpg','title':'瀑布流效果1'},{'src':'2.jpg','title':'瀑布流效果2'},{'src':'3.jpg','title':'瀑布流效果3'},{'src':'4.jpg','title':'瀑布流效果4'},{'src':'5.jpg','title':'瀑布流效果5'},{'src':'6.jpg','title':'瀑布流效果6'},{'src':'7.jpg','title':'瀑布流效果7'},{'src':'8.jpg','title':'瀑布流效果8'},{'src':'9.jpg','title':'瀑布流效果9'},{'src':'10.jpg','title':'瀑布流效果10'}];
	
window.onload=function(){
	//滚动底部加载
	$(window).scroll(function(){
		//屏幕加滚动距离
		var client=document.documentElement.clientHeight;
		var scroll=document.body.scrollTop||document.documentElement.scrollTop;
		var b=client+scroll;
		//最后一个盒子距顶部距离
		var boxs=$(".box");
		var a=boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
		//判断是否加载
		if(b>a){
			for(var i in data){
				var htmlNew=    "<div class='box'>"
							        +"<div class='info'>"
							            +"<div class='pic'><img  src='images/"+data[i].src+"'   ></div>"
							            +"<div class='title'>"+data[i].title+"</a></div>"
							        +"</div>"
							    +"</div>"
				$("#wrap").append(htmlNew);				
			}
			PBL();
		}
	})
	PBL();
	function PBL(){
		//获取盒子集合
		var boxs=$(".box");
		//获取屏幕可以放几张图片
		var w=boxs[0].offsetWidth;
		var c=document.documentElement.clientWidth;
		var num=Math.floor(c/w);
		console.log("num="+num);
		console.log("length="+boxs.length);
		//获取第一排盒子高度
		var bh=[];
		for(var i=0;i<boxs.length;i++){
			if(i<num){
				bh[i]=boxs[i].offsetHeight;
			}else{
				//获取最小高度
				var minH=Math.min.apply(null,bh);				
				//获取最小高度的位置
				var index=getIndex(minH,bh);
				console.log("index="+index);
				console.log("left="+boxs[index].offsetLeft);
				//改变其他盒子位置			
				getPost(boxs[i],minH,boxs[index].offsetLeft);
				
				//更新最小高度
				bh[index]+=boxs[i].offsetHeight;
			}
		}		
	};

	

};
	function getIndex(minH,arr){
		for(var i=0;i<arr.length;i++){
			if(minH==arr[i]){
				return i;
			}
		}
	};
	function getPost(box,top,left){		
		// 通过设置class名,判断是否操作过位置,避免了重复操作以及刷新全部图片透明度的动画;
		var className=$(box).attr("class");
		console.log("className="+className);
		if(className=="box F"){
			return;
		}else{			
		$(box).addClass("F");
	
		$(box).css({
			"position":"absolute",
			"top":top,
			"left":left,
			"opacity":0
		});
		
		$(box).finish().animate({
			"opacity":1		
		},2000)			
		}
		

	};

出了一个小问题就是动画添加，加这个动画就执行出错，不加就行。原来是引用的jquery版本出问题了，换个全的

停止动画用finish（），感觉 stop（）不够平滑。后来发现finish（）也不行，通过设置class名解决了。

瀑布流需要设置确定的一系列宽度，bootstrap图片是响应式的，定位会造成图片宽度变化，还是需要设置图片宽度，这就没有用bootstrap的必要了。

tongluren381

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
瀑布流实现

html代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>瀑布流效果特效代码</title> <script src="js/jQuery3.4.1.slim.min.js"></script...
复制链接

扫一扫