vue项目接口域名动态的获取方法
216
2023-07-05
用瀑布流的方式在网页上插入图片的简单实现方法
当我们的网页需要插入很多图片的时候,为了美观,我们可以选择用瀑布流的方法插入图片
首先我们在body里面放入我们需要展示的图片
然后设定样式
*{
margin: 0;
padding: 0;
}
.dinwei{
float: left;
}
.pic{
padding: 5px;
border: 1px solid #000000;
}
img{
margin: 0;
padding: 10px;
width: 220px;
height: auto;
}
接下来就是把图片用瀑布流的方式展现的js
window.onload=function(){
var dinwei=document.getElementsByClassName("dinwei");
var windwidth=document.documentElement.clientWidth||document.body.clientWidth;
var dinwidth=getStyle(dinwei[0],"width");
var num=Math.floor(windwidth/dinwidth);
//计算一行几张图片
//取出高度最小的列
var heightList=[];
for(var i=0;i if(i heightList[heightList.length]=getStyle(dinwei[i],"height"); }else{ var minHeight=getmin(heightList); var amin=minHeight.value; var index=minHeight.index; var temp=dinwei[i]; temp.style.position="absolute"; temp.style.top=amin+"px"; temp.style.left=index*dinwidth+"px"; heightList[index]=amin+getStyle(temp,"height"); } } } function getmin(arr){ var min=arr[0];[3,3,2,1,5,2] for(var i=1;i if(arr[i] min=arr[i]; } } var index=0; for(var j=0;j if(arr[j]==min){ index=j; break; } } return {value:min,index:index} } function getStyle(obj, attr) { if (obj.currentStyle) { return parseFloat(obj.currentStyle[attr]); } else { return parseFloat(window.getComputedStyle(obj)[attr]); } }
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~