网页瀑布流效果实现详解

拼搏现实的明天。 2021-12-23 15:09 365阅读 0赞

## 网页瀑布流效果实现详解 ##

确定构造函数 WaterFall  
确定属性 ：好多个box  
确定功能 ：  
初始化功能 ： 摆放每一张图片 （图片加载自动排序）  
找数组中最小值的下标（按照最小高度依次排序）  
操作滚动条（设置滚动条条件，图片无限加载）  
![效果展示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]**css样式**

* {
        				margin: 0;
        				padding: 0;
        			}
        			html,body{
        				width: 100%;
        				height: 100%;
        				
        			}
    			#main{
    				position: relative;   /*所有的盒子相对他来定位 的*/		
    				width:1212px;
    				margin: 0 auto;
    			}
    			.box{
    				padding:15px 0 0 15px; /* 要获取每列高度 =  图片和图片之间的距离*/
    				float: left;  /*块级元素水平排列*/
    			}
    			.pic{
    				padding: 10px;
    				border: 1px solid #CCCCCC;
    				border-radius: 5px;
    				box-shadow: 0 0 5px #CCCCCC; /*水平  垂直   阴影模糊程度   颜色*/
    			}
    			.pic img{
    				width:165px;
    				height: auto;
    			}

//HTML

<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>		
    </body>
    
    <script>
    	onload = function(){
    		waterFall();//瀑布流功能
    		//设置滚动条事件
    		window.onscroll = function(){
    			//获取最后一个盒子的高度值
    			lastBoxHeight = boxs[boxs.length-1].offsetTop + boxs[boxs.length-1].offsetHeight /2
    			//获取窗口的文档显示区的高度。 
    			wHeight = window.innerHeight ; 
    			//获取滚动条的高度
    			sTop = document.body.scrollTop  || document.documentElement.scrollTop;
    			if( lastBoxHeight < wHeight + sTop){//设置触发条件
    				//定义一个json对象，里面存放瀑布流加载的图片
    				var  _json = {"data":[{"scr" : "1.jpg"},{"scr" : "2.jpg"},{"scr" : "3.jpg"}]}
    				for(var i = 0 ; i < _json.data.length ; i++){//动态创建div、pic img（将图片放入）
    					//创建一个div，类名为box，存放在main中
    					var odiv = create("div");
    					odiv.className = "box";
    					$("main").appendChild(odiv)
    					//创建一个div、类名pic、存放到odiv中
    					var opic = create("div");
    					opic.className = "pic";
    					odiv.appendChild(opic)
    					//创建一个img标签，将图片依次存放到img里面
    					var oimg = create("img");
    					oing.src = "images/"+_json.data[i].src
    					opic.appendChild(oimg);
    				}
    				waterFall()
    			}
    		}
    	}
    	function $(id){
    		return document.getElementById(id);
    	}
    	function creat(ele){
    		return document.createElement(ele);
    	}
    	//瀑布流功能
    	function waterFall(){
    		boxs = document.getElementsByClassName("box");
    		//获取一个盒子的宽度
    		boxW = boxs[0].offsetWidth;
    		//定义一个数组 存放每一列图片的高度值
    		hArr = [ ];
    		for(var i = 0 ;  i < boxs.length ; i++){
    			//定义每行存放6张图片，将六张图片的高度存放到数组中
    			if(i < 6){
    				hArr.push( boxs[i].offsetHeight );
    			}else{
    				//第七张及其后的图片位置 根据数组中的最小高度确定
    				var minIndex = getMinHeightIndex()
    				//定位 第七张及其后面的图片位置
    				boxs[i].style.position = "absolute";
    				boxs[i].style.left = minIndex * boxW + "px";
    				boxs[i].style.top = hArr[minIndex] + "px";
    				//改变minIndex在数组中的高度值
    				hArr[minIndex] += boxs[i].offsetHeight;
    			}
    		}
    	}
    	//功能函数：获取数组最小值下标
    	function getMinHeightIndex(){
    		var minHeight = hArr[0];//假设最小值
    		var minHeightIndex = 0;
    		for( var i = 0 ; i < hArr.length ; i++){
    			if( hArr[i] < minHeight ){
    				minHeigt = hArr[i];
    				minHeightIndex = i;
    			}
    		}
    		return minHeightIndex;
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20211223/8df3ec3b01324479b4c46cbf50a50801.png