JavaScript实现图片瀑布流

最新推荐文章于 2023-06-30 11:34:39 发布

sdxjwkq01

最新推荐文章于 2023-06-30 11:34:39 发布

阅读量390

点赞数 1

文章标签： javascript 前端算法 php python

本文链接：https://blog.csdn.net/sdxjwkq01/article/details/125711290

版权

上一篇文章讲了php在服务端实现图片瀑布流渲染纯php实现图片瀑布流渲染_sdxjwkq01的博客-CSDN博客，这篇再讲个正常点的前端实现的瀑布流吧。其实也很简单，首先创建几个宽度相同的并排的竖向div，然后找出高度最小的div，往里面插入图片，重新计算高度最小的div，往里面插入图片，如此往复，直到所有图片都插入到页面中。下面还是先上代码，注释很详细了。

<head>
	<meta charset="utf-8">
	<style>
		body{
			overflow-y: auto;
		}
		.photos{
			position: absolute;
			top:0px;
			left: 0px;
			bottom:0px;
			width:500px;
			background: #000;
			overflow-x:hidden;
		}
		img{
			margin: 5px;
		}
	</style>
</head>
<body>
	<div class="photos">

	</div>
</body>
<script>
	//图片地址，后台生成的
	let imgs=["imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170328.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170400.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170420.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170434.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170454.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170514.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170527.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170543.png","imgs\/\u5fae\u4fe1\u622a\u56fe_20220710170559.png"];
	class Photos{
		/**
		 * [constructor 构造方法]
		 * @return {[type]} [description]
		 */
		constructor(){
			this.listView();
		}
		/**
		 * [listView 瀑布流图片列表]
		 * @return {[type]} [description]
		 */
		listView(){
	    	let col=2;//瀑布流列数
	    	let Height=[];//用于计算最小高度
	    	for(var i=0;i<col;i++){
	    		Height[i]=0;
	    	}
	    	let Width=Math.floor(document.querySelector(".photos").clientWidth/col);//图片容器宽度
    		let html=``;
    		//根据列数画出图片列容器
    		for(var i=0;i<Height.length;i++){
    			html+=`<div id="tree${i}" style="position:absolute;left:${i*Width};top:0px;width:${Width};padding:1px;background:#fff;"></div>`;
    		}
	    	document.querySelector(".photos").innerHTML=html;
	    	for(var i=0;i<imgs.length;i++){
	    		var minHeight=Math.min.apply(Math,Height);//找到所有列的最小高度
	    		var minIndex=0;
	    		//根据最小高度找到列索引
	    		for(var j=0;j<Height.length;j++){
	    			if(Height[j]==minHeight){
	    				minIndex=j;
	    				break;
	    			}
	    		}
	    		//向高度最小的列容器插入图片
	    		document.querySelector("#tree"+j).innerHTML+=`<img style="width:${Width-10}px;" src="${imgs[i]}" />`;
	    		//修改相应容器高度
	    		Height[j]+=document.querySelector("#tree"+j).offsetHeight;
	    	}
		}
	}
	new Photos();

</script>

运行一下，效果如下图：

确实很简单吧，这次就先分享到这里

sdxjwkq01

关注

1
点赞
踩
1

收藏

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

上一篇文章讲了php在服务端实现图片瀑布流渲染纯php实现图片瀑布流渲染_sdxjwkq01的博客-CSDN博客，这篇再讲个正常点的前端实现的瀑布流吧。其实也很简单，首先创建几个宽度相同的并排的竖向div，然后找出高度最小的div，往里面插入图片，重新计算高度最小的div，往里面插入图片，如此往复，直到所有图片都插入到页面中。下面还是先上代码，注释很详细了。运行一下，效果如下图：确实很简单吧，这次就先分享到这里...
复制链接

扫一扫