用瀑布流的方式在网页上插入图片的简单实现方法
当我们的网页需要插入很多图片的时候，为了美观，我们可以选择用瀑布流的方法插入图片
首先我们在body里面放入我们需要展示的图片
<divid="box"> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/1.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/2.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/3.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/4.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/5.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/6.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/7.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/8.jpg"> </div> </div> <divclass="dinwei"> <divclass="pic"> <imgsrc="image/9.jpg"> </div> </div> </div>
然后设定样式
<styletype="text/css">
*{
margin:0;
padding:0;
}
.dinwei{
float:left;
}
.pic{
padding:5px;
border:1pxsolid#000000;
}
img{
margin:0;
padding:10px;
width:220px;
height:auto;
}
</style>
接下来就是把图片用瀑布流的方式展现的JS
<scripttype="text/javascript">
window.onload=function(){
vardinwei=document.getElementsByClassName("dinwei");
varwindwidth=document.documentElement.clientWidth||document.body.clientWidth;
vardinwidth=getStyle(dinwei[0],"width");
varnum=Math.floor(windwidth/dinwidth);
//计算一行几张图片
//取出高度最小的列
varheightList=[];
for(vari=0;i<dinwei.length;i++){
if(i<num){
heightList[heightList.length]=getStyle(dinwei[i],"height");
}else{
varminHeight=getmin(heightList);
varamin=minHeight.value;
varindex=minHeight.index;
vartemp=dinwei[i];
temp.style.position="absolute";
temp.style.top=amin+"px";
temp.style.left=index*dinwidth+"px";
heightList[index]=amin+getStyle(temp,"height");
}
}
}
functiongetmin(arr){
varmin=arr[0];[3,3,2,1,5,2]
for(vari=1;i<arr.length;i++){
if(arr[i]<min){
min=arr[i];
}
}
varindex=0;
for(varj=0;j<arr.length;j++){
if(arr[j]==min){
index=j;
break;
}
}
return{value:min,index:index}
}
functiongetStyle(obj,attr){
if(obj.currentStyle){
returnparseFloat(obj.currentStyle[attr]);
}else{
returnparseFloat(window.getComputedStyle(obj)[attr]);
}
}
</script>
以上就是小编为大家带来的用瀑布流的方式在网页上插入图片的简单实现方法的全部内容了，希望对大家有所帮助，多多支持毛票票~