js获取图片的实际宽高，然后实现图片的瀑布流

ゞ浴缸里的玫瑰 2022-06-01 06:17 281阅读 0赞

这两天做了一下小页面，要求实现一个瀑布流，瀑布流中的图片尺寸需要随着上传的图片自动适配宽高，还要适配不同的手机。 这就需要先获取加载到的图片的实际尺寸，然后根据实际尺寸的宽高比例，然后再通过js获取实际手机的屏幕宽度，然后通过比例和手机宽度得到实际需要设置的图片的高度。

实际的思路如下：

1.首先获得手机的屏幕尺寸

var windowWidth = $(window).width();  
   var windowHeight = $(window).height();2.然后获取图片的宽高尺寸，得到实际图片的宽高比例 function geuImageSize(url, callback)\{  
    var img = new Image();  
    img.src = url;  
      
    //如果图片被缓存，则直接返回缓存数据  
    if(img.compltet)\{  
    /\* callback(img.width, img.height); \*/  
    callback(img.width, img.height, Number(img.height)/Number(img.width));  
    \}else\{  
    //完全加载完毕的事件  
    img.onload = function()\{  
    /\* callback(img.width, img.height); \*/  
    callback(img.width, img.height, Number(img.height)/Number(img.width));  
    \}  
    \}  
    \}

这个函数geuImageSize（url, callback)）输入一个img标签的图片路径，通过回调函数得到该图片的实际宽高以及宽高比例，3.如何获得图片的路径呢：var imgSrc2\_2 = $("\#pic\_2\_2").attr("src");4.得到实际手机的屏幕狂傲以及实际图片的宽高比例后，就能计算出该图片在该手机上应该要占的高度：$(".waterFall\_first:first").css("height", Number(windowWidth)\*r);//照片墙第一个横着的图片 r为宽高比例

实际的js全部代码为

<script type="text/javascript">
        	$(document).ready(function(){
    	    	var windowWidth = $(window).width();
    	    	var windowHeight = $(window).height();
    	    	var realDocHeight = Number(windowWidth)*0.42;
    	    	//设置首页轮播图位置图片高度随着手机宽度的变化而变化 i-headImage
    	    	$("#i-headImage").css("height", realDocHeight);
    	    	//pic_0 
    	    	var imgSrc0 = $("#pic_0").attr("src");
    	    	geuImageSize(imgSrc0,function(w,h,r){
    	    		console.log({width:w,height:h,ratio: r, realHeight: Number(windowWidth/2)*r});
    	    		$(".waterFall_first:first").css("height", Number(windowWidth)*0.5);//照片墙第一个横着的图片 横着的就固定按照0.66来
    	    		//alert("0:"+$(".waterFall_first:first").height());
    	    	});
    	    	
    	    	var imgSrc1_1 = $("#pic_1_1").attr("src");
    	    	geuImageSize(imgSrc1_1,function(w,h,r){
    	    		console.log({width:w,height:h,ratio: r, realHeight: Number(windowWidth/2)*r});
    	    		$(".waterFall_first_ul li:first").css("height", Number(windowWidth/2)*r);//照片墙第一列第一个
    	    		//alert("1-1:"+$(".waterFall_first_ul li:first").height());
    	    	});
    	    	
    	    	var imgSrc1_2 = $("#pic_1_2").attr("src");
    	    	geuImageSize(imgSrc1_2,function(w,h,r){
    	    		console.log({width:w,height:h,ratio: r, realHeight: Number(windowWidth/2)*r});
    	    		$(".waterFall_first_ul li:last").css("height", Number(windowWidth/2)*r);//照片墙第一列第二个
    	    		//alert("1-2:"+$(".waterFall_first_ul li:last").height());
    	    	});
    	    	
    	    	var imgSrc2_1 = $("#pic_2_1").attr("src");
    	    	geuImageSize(imgSrc2_1,function(w,h,r){
    	    		console.log({width:w,height:h,ratio: r, realHeight: Number(windowWidth/2)*r});
    	    		$(".waterFall_last_ul li:first").css("height", Number(windowWidth/2)*r);//照片墙第二列第一个
    	    		//alert("2-1:"+$(".waterFall_last_ul li:first").height());
    	    	});
    	    	
    	    	var imgSrc2_2 = $("#pic_2_2").attr("src");
    	    	geuImageSize(imgSrc2_2,function(w,h,r){
    	    		console.log({width:w,height:h,ratio: r, realHeight: Number(windowWidth/2)*r});
    	    		$(".waterFall_last_ul li:eq(1)").css("height", Number(windowWidth/2)*r);//照片墙第二列第二个
    	    		//alert("2-2:"+$(".waterFall_last_ul li:eq(1)").height());
    	    	});
    	    	
    	    	var imgSrc2_3 = $("#pic_2_3").attr("src");
    	    	geuImageSize(imgSrc2_3,function(w,h,r){
    	    		console.log({width:w,height:h,ratio: r, realHeight: Number(windowWidth/2)*r});
    	    		$(".waterFall_last_ul li:last").css("height", Number(windowWidth/2)*r);//照片墙第二列第三个
    	    		//alert("2-3:"+$(".waterFall_last_ul li:last").height());
    	    	}); 
        	})
        	
        	function geuImageSize(url, callback){
        		var img = new Image();
        		img.src = url;
        		
        		//如果图片被缓存，则直接返回缓存数据
        		if(img.compltet){
        			/* callback(img.width, img.height); */
        			callback(img.width, img.height, Number(img.height)/Number(img.width));
        		}else{
        			//完全加载完毕的事件
        			img.onload = function(){
        				/* callback(img.width, img.height); */
        				callback(img.width, img.height, Number(img.height)/Number(img.width));
        			}
        		}
        	}
        </script>

记录一下，以后方便自己回忆，也希望能帮到别的人。

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 html-docx-js 设置图片宽高导出的图片宽高不生效

导出教程：[ 表格导出成Excel文件或HTML转word文档][_Excel_HTML_word] 如果是通过style或者class加的样式，宽高是不生效的一定要用

谁借莪１个温暖的怀抱￠/ 2024年03月17日 21:53/ 0 赞/ 49 阅读

相关 ajax获取图片数据，实现瀑布流功能

[项目github地址][github] 封装 AJAX // ajax: async javascript and xml (json) "{}"

分手后的思念是犯贱/ 2022年12月26日 09:10/ 0 赞/ 110 阅读

相关 js获取图片宽高

原文链接：http://www.qttc.net/201304304.html 快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onloa

港控/mmm°/ 2022年08月18日 02:59/ 0 赞/ 234 阅读

相关 JS快速获取图片宽高的方法

原文：[http://www.css88.com/archives/5224][http_www.css88.com_archives_5224] // 记录当前时间

你的名字/ 2022年08月06日 14:07/ 0 赞/ 163 阅读

相关获取-图片实际宽高

Get on screen image var screenImage = $("image"); // Create new offscre

绝地灬酷狼/ 2022年06月11日 04:55/ 0 赞/ 223 阅读

相关 javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813

谁践踏了优雅/ 2022年06月08日 13:52/ 0 赞/ 372 阅读

相关图片加载完成后获取图片实际宽高

//图片加载完成后获取图片实际宽高 var \_test = document.getElementById(“test”); test.onload = functi

川长思鸟来/ 2022年06月08日 10:24/ 0 赞/ 194 阅读

相关 js获取原生图片的宽高

var myimage=http://baidu.com/img/data/upload/admin/5a321e69ab0db.jpg;

- 日理万妓/ 2022年06月03日 01:42/ 0 赞/ 231 阅读

相关 js获取图片的实际宽高，然后实现图片的瀑布流

这两天做了一下小页面，要求实现一个瀑布流，瀑布流中的图片尺寸需要随着上传的图片自动适配宽高，还要适配不同的手机。这就需要先获取加载到的图片的实际尺寸，然后根据实际尺寸的宽高

ゞ浴缸里的玫瑰/ 2022年06月01日 06:17/ 0 赞/ 282 阅读

相关 javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813

男娘i/ 2022年05月21日 08:12/ 0 赞/ 192 阅读