JavaScript实现瀑布流图片效果
程序员文章站
2022-06-09 08:47:35
本文实例为大家分享了js实现瀑布流图片效果的具体代码，供大家参考，具体内容如下
<...
本文实例为大家分享了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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function randomfunction(max , min){
return parseint(math.random() * (max - min)) + min;
}
var wrapul = document.getelementbyid("wrap");
var width = 200;
var rightpadding = 10;
var hs = [];
var num = 0;
function setlipos(bol){
var lis = wrapul.getelementsbytagname("li");
var windowbody = document.documentelement.clientwidth;
var cols = parseint(windowbody / width);
wrapul.style.width = cols * (width + rightpadding) + "px";
var arrt = [];
for (var i = 0; i < cols; i++) {
arrt[i] = 0;
}
function createli(index){
var li = lis[index]||document.createelement("li");
var h = hs[index] || randomfunction(100, 300);
li.style.height = h + "px";
if(bol){
hs.push(h);
}
var min = arrt[0];
var minindex = 0;
for (var i = 0; i < arrt.length; i++) {
if(min > arrt[i]){
min = arrt[i];
minindex = i;
}
}
li.style.top = arrt[minindex] + "px";
li.style.left = minindex * (width + rightpadding) + "px"; arrt[minindex] += (h + rightpadding);
bol&&wrapul.appendchild(li);
}
for(var i = 0; i < 20; i++){
if(bol){
num++;
}
createli(i);
}
}
setlipos(true);
window.onresize = function(){
setlipos(false);
}
});
</script>
<script type="text/javascript">
$(function(){
var imgarr = ["1.jpg","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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇： 详解webpack介绍&安装&常用命令