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

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

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