这两天做了一下小页面,要求实现一个瀑布流,瀑布流中的图片尺寸需要随着上传的图片自动适配宽高,还要适配不同的手机。 这就需要先获取加载到的图片的实际尺寸,然后根据实际尺寸的宽高比例,然后再通过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>
记录一下,以后方便自己回忆,也希望能帮到别的人。