学习总结之用JS实现图片瀑布流

发表于   |   分类于

前言

　　什么是瀑布流呢？
　　大家打开百度图片，输入任意关键字，搜索到的图片区域的布局，就是瀑布流啦。不同大小的图片将可视的区域占满。
那么如何去实现它呢？
　　下面就详细的讲解一下~

　　首先我们可以对需要完成的事做一个大概的构想：
　　为了使图片以瀑布流的形式呈现，我们需要怎么做呢？
　　我们先摆放好第一排的图片吧~摆放好了之后，开始摆放第二排的图片，但是该如何去摆放呢？
显然，我们需要把图片放在第一排的图片中，高度最小的一张的下方；紧接下来的图片呢？哈，当然，是用同样的方法去摆放。只是摆放位置要以之前的状况为基础，即第一排的最矮的那一张下方已经摆放了图片的状况。在这种情况下，我们继续找最矮的一张，把图片摆放好。
那么我们反复完成这个工作，最终就能够实现瀑布流的效果了。
好了接下来就用代码来实现它吧~

CODE

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>瀑布流</title>
        <link rel="stylesheet" href="cssname.css" />
        <script src="jsname.js"></script>
    </head>
    <body>
        <div id="container">//为所有的图片设置一个容器
        <div class="box">//为每张图片设置容器
            <div class="box_img">//用于设置图片的边框
                <img src="0.jpg" />//图片的内容
            </div>//当然，这样的Box有非常多个
            //.........................................（添加图片）
        </div>
        </body>
 </html>

CSS

*{
margin 0px;
padding 0px;
}//将全局的内外边距都设置为0px
#container{
position: relative;//将图片容器的属性设置为相对定位
}
.box{
padding: 5px;//为每个图片的容器加上内边距(在视觉上表现为图片上下左右的间隔）
float: left;//向左浮动排成一行
}
.box_img{
padding: 5px;//为图片加上内边距
border: 1px solid #cccccc;//为图片加边框
box-shadow: 0 0 5px #ccc;//设置边框的阴影(这里复习一下这四个参数，分别是阴影向右便宜距离，向下偏移距离，阴影模糊程度（值越大越模糊）以及阴影的颜色
border-radius: 5px;//设置边框的圆角
}
.box_img img{
width: 150px ;//设置图片的宽度为150px
height: auto;//高度自适应
}

JS

　　JS的代码我们分布来进行讲解：

图片摆放

function imgLocation(parent,content){
//首先
 var cparent=document.getElementById(parent);//我们定义一个变量取出Id为parent的元素（取出container）
 var ccontent=getChildElement(cparent,content);//再从parent中选出类名为content的子元素，这里我们再定义一个函数来完成这个步骤（取出box)
 var imgWidth=ccontent[0].offsetWidth;//图片宽度是一致的在CSS中设置了150px,这里我们得到这个宽度的值（用offsetwidth属性）
 var num=Math.floor(document.documentElement.clientWidth/imgWidth);//这里用Math.floor向下取整，得到一排能放几张图，即：clientwidth(网页可见宽度)/图片宽度，向下取整。
 cparent.style.cssText="width:"+imgWidth*num+"px;margin: 0 auto";//用CSSText来临时添加CSS属性。这里的cparent其实就是我们的container，就是整个图片包含区。设置他的宽度固定为(图片数乘图片宽度)，最后用margin来居中.
 //这样一来我们就实现了缩动屏幕时，图片包含区域不会随着屏幕大小而缩放。
 //现在开始移动图片
 var BoxHeightArr=[];//要移动图片我们先要获取第一排的所有的高度，我们定义一个空的数组
 for(var i=0;i<ccontent.length;i++){//用for循环来进行数组的建立
     if(i<num){
         BoxHeightArr[i]=ccontent[i].offsetHeight;//当i小于第一排图片数目时，我们把所有的高度存入数组当中
     }else{   //当ii大于num，即到了第二排，此时进行正真的排列
         var minheight=Math.min.apply(null,BoxHeightArr);//这里的APPLY是吧Math.min的命令应用于BoxHeightArr[]数组。这样可以得到数组中最小的一个数字。由于Math没有对象。所以第一个填“空”
        var minIndex=getminheightLocation(BoxHeightArr,minheight);//这一步我们建立函数去得到最小的高度的图片是第一排的第几张，这个第几即是minIndex
        ccontent[i].style.position="absolute";设置图片的定位为绝对定位
         ccontent[i].style.top=minheight+"px";//由于此时已经到了第二排，所以设置这张图的距离顶部的高度为第一排的最小图片高度
         ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";//而图片距左的距离，我们可以通过第一排来进行判断，第一排最小高度的图片距离左边的距离即是所需要距离
         BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight;//但是这样所有的图不就都放在第一排的最短那张下面了吗？所以我们要把第一排最矮的哪一个的高度设置成，它等于它自己的高度加上第二排这张图片的高度！就行了。
     }                       
 }

取出子元素的函数

 function getChildElement(parent,content){
var contentArr=[];//定义一个空的数组
var allcontent=parent.getElementsByTagName("*");//从parent中取出所有的标签
for(var i=0;i<allcontent.length;i++){//用for循环完成数组的构建
    if(allcontent[i].className==content){
        contentArr.push(allcontent[i]);//这里的意思是：若取出的标签的类的名字与自己输入的是一样的话，则把它添加到数组之中（我们最终取出了类名为box的div)
    }
}
return contentArr;//返回这个数组
}

获取最小高度的序数

function getminheightLocation(BoxHeightArr,minHeight){//对象是一个数组和一个数字
for(var i in BoxHeightArr){//运用遍历，即循环次数等于选取数组的长度
    if(BoxHeightArr[i]==minHeight){
        return i;//当数组的第i个值等于最小高度时，我们把这个i，也就是这是第几个，取出来。这里的minheight在图片摆放的函数中进行了声明
    }
}
}

最终的调用

页面加载时定义一个函数对ImageLocation函数进行调用：

 window.onload=function(){
imgLocation("container","box");
}//看到传递的container和box，之前的函数中不清晰的部分也豁然开朗了~

结语

　　瀑布流的实现实际上是一个比较简单的过程，但是这个过程中涵盖了非常多的知识点。
那么下一篇文章，将会讲解如何实现瀑布流的重复循环加载~