瀑布流照片墙布局-白红宇

title: 瀑布流照片墙布局

瀑布流概念

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

实现

html代码块

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

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