瀑布流照片墙布局

---

title: 瀑布流照片墙布局

瀑布流概念

• 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个区块总是放在总高度最短的那一列的下面。

实现

• html代码块

	<ul id="pics">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
复制代码

• css代码块

	*{margin:0;padding:0};
	#pics{list-style: none;margin: 30px auto;width: 1080px;}
	#pics li{float: left;width: 250px;margin: 10px;}
	#pics li div{width: 210px;padding: 10px;border: 1px solid gray;margin-bottom: 20px;}
	#pics li div img{width: 200px;}
复制代码

• js代码块

	//运用ajax获取图片地址

	//获取页面元素(组件/控件)
	let lis=document.getElementById("pics").getElementsByTagName("li");

	//接收服务器数据
	function fn(data){
		//遍历所有数据
		for(let i in data){
			let oDiv=document.createElement("div");
			let oImg=document.createElement("img");
			let oP=document.createElement("p");
			//将接收的数据放到页面组件中
			oImg.src=data[i].preview; //缩略图
			oP.innerHTML=data[i].title;  //标题
			//将oImg和oP放到oDiv中
			oDiv.appendChild(oImg);
			oDiv.appendChild(oP);
			//按一定的规律将图片放入到li中
			switch(i%4){
				case 0:
					lis[0].appendChild(oDiv);
				break;
				case 1:
					lis[1].appendChild(oDiv);
				break;
				case 2:
					lis[2].appendChild(oDiv);
				break;
				case 3:
					lis[3].appendChild(oDiv);
				break;
				default:
					lis[0].appendChild(oDiv);
				break;
			}

		}
		
	}

	//pageIndex表示页码
	let pageIndex=1;
	let JSONP=document.creatElement("script");
	JSONP.type='text/javaScript';
	//src表示地址 fn表示回调函数
	JSONP.src="http://www.wookmark.com/api/json/popular?page='+pageIndex+'&callback=fn";
	document.body.appendChild(JSONP);
复制代码

• 这种方式实现的效果是每个列的元素内的图片数量是一致的，如果某一列高度图片过高，那么就会出现最后的效果是参差不齐的。如果在加载下一页，效果就会更加不好，会存在一个又一个的窟窿，这显然是和我们想要的效果是不一致的。那样这就需要我们队代码进行一定的更改。 代码如下：

	//获取页面元素(组件/控件)
	let lis=document.getElementById("pics").getElementsByTagName("li");
	//pageIndex表示页码
	let pageIndex=1;
	let isLoaded=false;
	loadData();//加载数据

	//滚动事件
	window.onscroll=function(){
		var index=getMinHeight();//最短列的索引
		// console.log(document.documentElement.scrollTop);//滚动距离
		//滚动高度
		var h1=document.documentElement.scrollTop;
		var h2=document.documentElement.clientHeight;//视口高度
		var h3=lis[index].offsetHeight;//最短列高度
		if(h1+h2>h3){
			//加载下一页
			pageIndex++;
			if(isLoaded){
				loadData();	
			}
		}
	};
	
	//接收服务器数据
	function fn(data){
		//遍历所有数据
		for(let i in data){
			let oDiv=document.createElement("div");
			let oImg=document.createElement("img");
			let oP=document.createElement("p");
			//将接收的数据放到页面组件中
			oImg.src=data[i].preview; //缩略图preview表示图片路径
			oP.innerHTML=data[i].title;  //标题title表图片标题
			//将oImg和oP放到oDiv中
			oDiv.appendChild(oImg);
			oDiv.appendChild(oP);

			//设置div预留高度
			var oH=(data[i].height/data[i].width)*220+80+'px';
			oDiv.style.height=oH;
			oDiv.appendChild(oImg);
			oDiv.appendChild(oP);
			//计算 上一次存放后，所有列中最短列
			//将图片放置在最短的列中
			var index=getMinHeight();
			lis[index].appendChild(oDiv);
		}
		isLoaded=true;//加载完毕
		
	};
	//获取最短列
	function getMinHeight(){
		let minIndex=0;		//假设第一列最短 最短列索引
		//取出最短列的高度
		let mHieght=lis[minIndex].offsetHeight;
		for(let i=0;i<lis.length;i++){
			if(lis[i].offsetHeight<mHieght){
				mHieght=lis[i].offsetHeight;	//将高度短的列的高度保存起来
				minIndex=i;	//将短的列的索引保存起来
			}
		}
		return minIndex;
	};
	
	function loadData(){
		isLoaded=false;//正在加载	
		let JSONP=document.creatElement("script");
		JSONP.type='text/javaScript';
		//src表示地址打架可自行引入 fn表示回调函数
		JSONP.src="http://www.----?page='+pageIndex+'&callback=fn";
		document.body.appendChild(JSONP);
	}
	
复制代码

• 最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，是用于帮助大家理解瀑布流布局的，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

转载于:https://juejin.im/post/5ad49d5b5188257ddb1018ce