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>记录一下，以后方便自己回忆，也希望能帮到别的人。