本文实例为大家分享了js实现瀑布流图片效果的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
#包装{
位置:相对;
list-style:没有;
保证金:0汽车;
}
李#包装{
宽度:200 px;
字体大小:1.5快速眼动;
位置:绝对的;
background - color: # CCCCCC;
-webkit-transition:所有2 s;
}
李#包装div {
宽度:100%;
高度:100%;
溢出:隐藏;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul id="包装"祝辞& lt;/ul>
& lt;/body>
& lt;脚本type=" text/javascript " src=" https://cache.yisu.com/upload/information/20200622/114/72925.html ", " 2. jpg”,“3. jpg”、“4. jpg”、“jpg 5.”、“6. jpg”,“7. jpg”);
$("李")。每个(函数(指数(el) {
var n=RandomNumBoth (0, imgArr.length-1);
var imgsrc=https://www.yisu.com/zixun/imgArr [n];
$ (). html (“& lt; div> & lt; img onload=loadImage”()的src=" + imgsrc + "的祝辞& lt;/div>”);
})；
})；
函数loadImage () {
美元(img)。每个(函数(指数(el) {
var=$ () .width (),
b=$ () .height (),
pa=$(这).parent () .width (),
pb=$(这).parent () .height (),
e=a/b//图片宽高比3
pe=pa/pb;//承载图片容器宽高比
如果(e>=pe) {
(美元). css({高度:“100%”,宽度:“自动”});
var imgW=$(这).width (),
.width iW=$(这).parent () (),
w=- (imgW -信息战)/2;
$ (). css (marginLeft, w);
其他}{
(美元). css({宽度:“100%”,高度:“自动”});
var imgH=$(这).height (),
.height iH=$(这).parent () (),
h=- (imgH - iH)/2;
$ (). css (marginTop, h);
}
})；
}
函数RandomNumBoth(最小,最大){
var=最大-最小;
var兰德=math . random ();
var num=分钟+数学。轮(兰德*范围);
返回num;
}
& lt;/script>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
