瀑布流布局

 

代码 

function putImg(data){
	let element=[];
	data.forEach(item=>{
		let waterItem=create("div","waterItem");
		let images=create("img");
		images.src=item.url;
		let waterText=create("div","waterText");
		waterText.textContent=item.title;
		waterItem.append(images,waterText);
		element.push(waterItem);
		$(".waterfall").append(waterItem);
	})
	return element;
}

let temp=putImg(data);
let waterfallWidth=$(".waterfall").offsetWidth;
let waterItemWidth=$(".waterItem").offsetWidth;
let cols=parseInt(waterfallWidth/waterItemWidth);
let height=new Array(cols).fill(0);
let width=new Array(cols).fill(0);
let marginBottom=20;
window.onload=function(){
	for(let i=0;i<temp.length;i++){
		if (i<cols) {
			height[i]=temp[i].offsetHeight;
			width[i]=temp[i].offsetLeft;
		}else{
			temp[i].style.position="absolute";
			let minHeight=Math.min(...height);
			let minIndex=height.indexOf(minHeight);
			temp[i].style.top=`${minHeight+marginBottom}px`;
			temp[i].style.left=`${width[minIndex]}px`;
			height[minIndex]+=temp[i].offsetHeight+marginBottom;
		}
	}
}

window.addEventListener("scroll",function(){
	let scroll=document.documentElement.scrollTop;
	let winHeigth=this.innerHeight;
	let min=Math.min(...height);
	if (scroll+winHeigth>=min) {
		let temp=putImg(data);
		for(let i=0;i<temp.length;i++){
			temp[i].style.position="absolute";
			let minHeight=Math.min(...height);
			let minIndex=height.indexOf(minHeight);0
			temp[i].style.top=`${minHeight+marginBottom}px`;
			temp[i].style.left=`${width[minIndex]}px`;
			height[minIndex]+=temp[i].offsetHeight+marginBottom;
		}
	}
})

 

数据 

let data=[
	{
		"url":"images/01.jpg",
		"title":"日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。"
	},
	{
		"url":"images/02.jpg",
		"title":"寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！"
	},
	{
		"url":"images/03.jpg",
		"title":"好雨知时节，当春乃发生。 随风潜入夜，润物细无声。 野径云俱黑，江船火独明。 晓看红湿处，花重锦官城。"
	},
	{
		"url":"images/04.jpg",
		"title":"床前明月光，疑是地上霜。 举头望明月，低头思故乡。"
	},
	{
		"url":"images/05.jpg",
		"title":"君不见黄河之水天上来，奔流到海不复回。 君不见高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来"
	},
	{
		"url":"images/06.jpg",
		"title":"朝辞白帝彩云间，千里江陵一日还。 两岸猿声啼不住，轻舟已过万重山。"
	},
	{
		"url":"images/07.jpg",
		"title":"春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。"
	},
	{
		"url":"images/08.jpg",
		"title":"白日何短短，百年苦易满。 苍穹浩茫茫，万劫太极长。 麻姑垂两鬓，一半已成霜。"
	},
	{
		"url":"images/09.jpg",
		"title":"昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。"
	},
	{
		"url":"images/10.jpg",
		"title":"国破山河在，城春草木深。 感时花溅泪，恨别鸟惊心。 烽火连三月，家书抵万金。 白头搔更短，浑欲不胜簪。"
	},
	{
		"url":"images/11.jpg",
		"title":"死去元知万事空，但悲不见九州同。 王师北定中原日，家祭无忘告乃翁。。"
	},
	{
		"url":"images/12.jpg",
		"title":"远上寒山石径斜，白云深处有人家。 停车坐爱枫林晚，霜叶红于二月花。"
	},
	{
		"url":"images/13.jpg",
		"title":"美人卷珠帘，深坐颦蛾眉。 但见泪痕湿，不知心恨谁。"
	},
	{
		"url":"images/14.jpg",
		"title":"茅檐低小，溪上青青草。醉里吴音相媚好，白发谁家翁媪。 大儿锄豆溪东，中儿正织鸡笼。最喜小儿亡赖，溪头卧剥莲蓬。"
	},
	{
		"url":"images/15.jpg",
		"title":"四五十年，风雨如晦不重见。 过眼飞云，横竖茫茫一线天。 休要夸口，豪杰劫后是民愿。 海天环顾，一路走来一路烟。"
	},
	{
		"url":"images/16.jpg",
		"title":"人民胜利今何在？满路新贵满目衰! 核弹高置昆仑巅，摧尽腐朽方释怀。"
	},
	{
		"url":"images/17.jpg",
		"title":"江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝。能不忆江南？"
	},
	{
		"url":"images/18.jpg",
		"title":"众鸟高飞尽，孤云独去闲。 相看两不厌，只有敬亭山。"
	},
	{
		"url":"images/19.jpg",
		"title":"碧玉妆成一树高，万条垂下绿丝绦。 不知细叶谁裁出，二月春风似剪刀。"
	},
	{
		"url":"images/20.jpg",
		"title":"鹦鹉来过吴江水，江上洲传鹦鹉名。 鹦鹉西飞陇山去，芳洲之树何青青。 烟开兰叶香风暖，岸夹桃花锦浪生。 迁客此时徒极目，长洲孤月向谁明。"
	},
	{
		"url":"images/21.jpg",
		"title":"慈母手中线，游子身上衣。 临行密密缝，意恐迟迟归。 谁言寸草心，报得三春晖。"
	},
	{
		"url":"images/22.jpg",
		"title":"生当作人杰，死亦为鬼雄。至今思项羽，不肯过江东。"
	},
	{
		"url":"images/23.jpg",
		"title":"汉皇重色思倾国，御宇多年求不得。 杨家有女初长成，养在深闺人未识。 天生丽质难自弃，一朝选在君王侧。 回眸一笑百媚生，六宫粉黛无颜色。 春寒赐浴华清池，温"
	},
	{
		"url":"images/24.jpg",
		"title":"泉眼无声惜细流，树阴照水爱晴柔。 小荷才露尖尖角，早有蜻蜓立上头。"
	},
	{
		"url":"images/25.jpg",
		"title":"幽闺情脉脉，漏长宵寂寂。草萤飞夜户，丝虫绕秋壁。薄笑夫为欣，微欢还成戚。金簪鬓下垂，玉箸衣前滴"
	},
	{
		"url":"images/26.jpg",
		"title":"今朝春比昨朝春，北阮番成南阮贫。 借问牧童应没酒，试尝梅子又生仁。 六如偈送钱塘妾，八斗才逢洛水神。 多少好花空落尽，不曾遇着赏花人。"
	},
	{
		"url":"images/27.jpg",
		"title":"富儿重安居，贫士轻远游。衣食苟不充，奔迸宁得休？前年游稷下，将母住齐州。母卒始归葬，暂一省林邱。本无置锥地，故乡安可留？今当涉河洛，但为妻子谋。出门瞰春光"
	},
]