本文实例为大家分享了js实现瀑布流图片效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
list-style: none;
margin: 0 auto;
}
#wrap li{
width: 200px;
font-size: 1.5rem;
position: absolute;
background-color: #CCCCCC;
-webkit-transition: all 2s;
}
#wrap li div{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<ul id="wrap"></ul>
</body>
<script type="text/javascript" src="https://cache.yisu.com/upload/information/20200622/114/72925.html","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg"];
$("li").each(function(index, el) {
var n = RandomNumBoth(0,imgArr.length-1);
var imgsrc = imgArr[n];
$(this).html("<div><img onload='loadImage()' src='"+imgsrc+"'></div>");
});
});
function loadImage(){
$("img").each(function(index, el) {
var a=$(this).width(),
b=$(this).height(),
pa = $(this).parent().width(),
pb = $(this).parent().height(),
e=a/b, //图片宽高比 3
pe=pa/pb; //承载图片容器宽高比
if(e>=pe){
$(this).css({height:"100%",width:"auto"});
var imgW = $(this).width(),
iW = $(this).parent().width(),
w = -(imgW - iW)/2;
$(this).css('marginLeft',w);
}else{
$(this).css({width:"100%",height:"auto"});
var imgH = $(this).height(),
iH = $(this).parent().height(),
h = -(imgH - iH)/2;
$(this).css('marginTop',h);
}
});
}
function RandomNumBoth(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
var num = Min + Math.round(Rand * Range);
return num;
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
