瀑布流

5.1、案例分析

1. 瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应；

2. 使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局；

3. 使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版；

4. 使用window.onscroll，当滚动滚轮时，判断是否显示到最后一张图片，在这之前会从模拟的数据中读取图片地址，再添加到页面里，使得页面可以一直滚动下去，模拟了百度图片的效果；

5. 在css中加入了过渡，使得图片位置变化的时候有过渡效果；

本特效的网页内容和样式都很简单就不写在这了，主要讲解一下js代码，下面上代码

window.onload = function(){ //判断页面内容与样式是否加载完毕
    imglocation("container","box");
    var imgData = {"data":[{"src":"img2.jpg"},{"src":"img3.jpg"},{"src":"img4.jpg"},{"src":"img5.jpg"},{"src":"img6.jpg"}]};//模拟的图片地址
    
    window.onscroll = function(){//监听滚轮事件
      if(checkFlag()){//checkFlag()是判断是否快要显示最后一张图，如果是返回true，否则返回false
        for(var i = 0;i<imgData.data.length;i++) {//js创建节点，并设置属性
          var ccontent = document.createElement("div");
          ccontent.className = "box";
          cparent.appendChild(ccontent);
          var boximg = document.createElement("div");
          boximg.className = "box_img";
          ccontent.appendChild(boximg);
          var Img = document.createElement("img");
          Img.src = "img/" + imgData.data[i].src;
          boximg.appendChild(Img);
        }
      }
      imglocation("container","box");//排版函数
    }

    window.onresize = function() {//当窗口改变时再次调用排版函数
      imglocation("container","box");
    }
  }

排版函数

function imglocation(parent,content) {
    //将parent中内容全部取出,获取所有的图片
    var ccontent = getChildElement(cparent,content);
    var imgWidth = ccontent[0].clientWidth;//图片的宽度
    var OWidth = document.documentElement.clientWidth;//窗口宽度
    var num = Math.floor(OWidth/imgWidth);//计算一行能摆放的图片数
    cparent.style.cssText = "width:" + imgWidth * num + "px;margin: 0 auto;";
    //设置css样式
    var BoxheightArr = [];
    for(var i = 0;i<ccontent.length;i++){
      if(i<num){
        BoxheightArr[i] = ccontent[i].offsetHeight;
        ccontent[i].style = "";
      } else {
        var minHeight = Math.min.apply(null,BoxheightArr);
        var minIndex = getminheightLocation(BoxheightArr,minHeight);
        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;
      }
    }
  }

完整代码请到GitHub上观看，欢迎star

总结

虽然我这里写的是js实现特效，但是如果能用css实现，那么最后是用css，这就看哪种方法方便了，择优嘛；好啦，今天就写这三个案例吧，希望大家看完这三个案例，能够有些想法，最后是要动手写写，光看是没有用的。
最后，谢谢各位的观看，想看源代码的可以去我的GitHub上，欢迎star或者添加更多的js特效；如果有哪里写的不好也请指出来，我会马上去改正；如果感到对你有用欢迎收藏点赞！谢谢！