JavaScript实现瀑布流图片效果

2024-02-17 17:20:04 143

*{ margin:0; padding:0; } #wrap{ position:relative; list-style:none; margin:0auto; } #wrapli{ width:200px; font-size:1.5rem; position:absolute; background-color:#CCCCCC; -webkit-transition:all2s; } #wraplidiv{ width:100%; height:100%; overflow:hidden; } $(function(){ functionrandomFunction(max,min){ returnparseInt(Math.random()*(max-min))+min; } varwrapUL=document.getElementById("wrap"); varwidth=200; varrightPadding=10; varhs=[]; varnum=0; functionsetLiPos(bol){ varlis=wrapUL.getElementsByTagName("li"); varwindowBody=document.documentElement.clientWidth; varcols=parseInt(windowBody/width); wrapUL.style.width=cols*(width+rightPadding)+"px"; vararrT=[]; for(vari=0;iarrT[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(vari=0;i<20;i++){ if(bol){ num++; } createLi(i); } } setLiPos(true); window.onresize=function(){ setLiPos(false); } }); $(function(){ varimgArr=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg"]; $("li").each(function(index,el){ varn=RandomNumBoth(0,imgArr.length-1); varimgsrc=imgArr[n]; $(this).html("

"); }); }); functionloadImage(){ $("img").each(function(index,el){ vara=$(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"}); varimgW=$(this).width(), iW=$(this).parent().width(), w=-(imgW-iW)/2; $(this).css('marginLeft',w); }else{ $(this).css({width:"100%",height:"auto"}); varimgH=$(this).height(), iH=$(this).parent().height(), h=-(imgH-iH)/2; $(this).css('marginTop',h); } }); } functionRandomNumBoth(Min,Max){ varRange=Max-Min; varRand=Math.random(); varnum=Min+Math.round(Rand*Range); returnnum; }

JavaScript实现瀑布流图片效果

热门推荐

随机推荐