“瀑布流"

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。

瀑布流布局效果

图解瀑布流算法

1、首先，每一排每一列的图片都是等宽度的图片，但是高度都不相同；

2、当图片排满一排后，接着向第二行排列时，如图所示的第六张图片应该接着上一排高度最短的地方放入；

3、同理，第七章图片就接着在剩下的位置中寻找高度最短的地方放入；

即每个图片的插入都是放在每列高度最短的后面。

代码解析

html:

 <div class="pubu-container">
        <div class="item" id="pubu-01"></div>
        <div class="item" id="pubu-02"></div>
        <div class="item" id="pubu-03"></div>
        <div class="item" id="pubu-04"></div>
    </div>

四个class="item"的div代表页面一共会有四列图片显示。

css：

* {
    border: 0;
    list-style: none;
    text-decoration: none;
    outline: none;
    margin: 0;
    padding: 0;
}
body{
    background-color: #EBEBEB;
}
.pubu-container{
    width: 75%;
    margin: 0 auto;
    /*弹性布局 方向为水平显示*/
    display: flex;
    flex-direction: row;
}

.pubu-container .item{
    flex: 1;
    margin:18px;
}

.pubu-container .item img{
    width: 100%;
    border: 10px solid white;
    margin-top: 8px;
    transition: all 0.3s ease-in-out;/*设置渐变效果*/
}

.pubu-container .item img:hover{
    transform: scale(1.07);  /*变大1.07倍*/
    cursor: pointer;
    box-shadow: 0 3px 2px 1px #999;

}

其中运用弹性布局，将一个大的div分成四列：

.pubu-container{
   display: flex;
    flex-direction: row;  
}
.pubu-container .item{
    flex: 1;
}

其显示的效果即为：

js解析：

按照图解的思路，应先找到四列中高度最小的那列div，然后再在后面加入图片；则首先应写计算每列div高度的函数：

// 计算每个div的高度
function jisuan(pbImgs) {
    if (pbImgs === 0 || pbImgs.length === 0 ) {
        return 0;
    }
    else {
        var height = 0;
        // 获取当前每列的图片
        for(var i = 0;i < pbImgs.length; i++){
            var img = pbImgs[i];
            var h = img.height;
            height = height + h;
        }
        return  height;
    }
}

在通过计算返回的高度比较找到四列div中高度最小的那个：

// 找到高度最小的div
function minDiv() {
    var pb1 = document.getElementById("pubu-01");
    var pb2 = document.getElementById("pubu-02");
    var pb3 = document.getElementById("pubu-03");
    var pb4 = document.getElementById("pubu-04");

    var pbImgs_1 = pb1.children;
    var pbImgs_2 = pb2.children;
    var pbImgs_3 = pb3.children;
    var pbImgs_4 = pb4.children;

    var pb1Height = jisuan(pbImgs_1);
    var pb2Height = jisuan(pbImgs_2);
    var pb3Height = jisuan(pbImgs_3);
    var pb4Height = jisuan(pbImgs_4);

    // 找到高度最小的div
    var minHeight = Math.min(pb1Height,pb2Height,pb3Height,pb4Height);

    if (minHeight === pb1Height){
        return pb1;
    }
    if (minHeight === pb2Height){
        return pb2;
    }
    if (minHeight === pb3Height){
        return pb3;
    }
    if (minHeight === pb4Height){
        return pb4;
    }
}

找到高度最小的div后，在相应div内继续添加图片即可；但是此处需要注意的是，此处不能使循环方式添加：

//屏幕默认大小，初始化图片的占用位置
var windowHeight 。window. screen. height+500;
window.onload = function(){
while(true){
if(document . documentElement . scrollHeight > windowteight){ //达到预期的高度，停止
break;
}
var mDiv = minDiv();
//插入图片
var img = document.createElement("img");
img. setAttribute("src","img/8.jpg");
mDiv. appendchild(img);
}

此方法会使所有的图片都添加在第一次计算高度最小的div内，这是因为浏览器的渲染需要时间，而js的计算很快，当浏览器还没完全渲染完成时，js已经完成了计算，所以循环的方法不能使用，此处应该引用定时器来帮助实现循环效果：

// 屏幕默认大小，初始化图片占用页面大小
var windowHeight = window.screen.height + 500;

var imgId = 0;

// 自动加载图片
function picture() {
   var inter = setInterval(function(){
       if (document.documentElement.scrollHeight > windowHeight) {
           clearInterval(inter);
       } // 达到预期的高度，停止加载

       var mDiv = minDiv();
       // 插入图片
       imgId++;
       if(imgId > 27){  //因为此处只有27张照片
           imgId = 1;
       }
       var img = document.createElement("img");
       img.setAttribute("src","img/"+imgId+".JPG");
       mDiv.appendChild(img);
   },100);
}

最后在加载网页的时候引入插入图片的函数，同时还需引入监听滚动事件，实现当滚动鼠标时，图片可以不停的更新。

window.onload = function () {
    picture();

    //监听滚动事件
    window.document.addEventListener("scroll",function () {
        // document.documentElement.scrollTop: 浏览器滚动部分高度
        // window.screen.height：当前窗口高度
        // document.documentElement.scrollHeight：能滚动的最大高度 浏览器所有内容高度
        if (document.documentElement.scrollTop + window.screen.height > document.documentElement.scrollHeight){
            // 在插入图片
            windowHeight = windowHeight + 500;
            picture();
        }
    });
};

完整js：

window.onload = function () {
    picture();

    //监听滚动事件
    window.document.addEventListener("scroll",function () {
        // document.documentElement.scrollTop: 浏览器滚动部分高度
        // window.screen.height：当前窗口高度
        // document.documentElement.scrollHeight：能滚动的最大高度 浏览器所有内容高度
        if (document.documentElement.scrollTop + window.screen.height > document.documentElement.scrollHeight){
            // 在插入图片
            windowHeight = windowHeight + 500;
            picture();
        }
    });
};

// 屏幕默认大小，初始化图片占用页面大小
var windowHeight = window.screen.height + 500;

var imgId = 0;

// 自动加载图片
function picture() {
    var inter = setInterval(function(){
        if (document.documentElement.scrollHeight > windowHeight) {
            clearInterval(inter);
        } // 达到预期的高度，停止加载

        var mDiv = minDiv();
        // 插入图片
        imgId++;
        if(imgId > 27){
            imgId = 1;
        }
        var img = document.createElement("img");
        img.setAttribute("src","img/"+imgId+".JPG");
        mDiv.appendChild(img);
    },100);
}


// 找到高度最小的div
function minDiv() {
    var pb1 = document.getElementById("pubu-01");
    var pb2 = document.getElementById("pubu-02");
    var pb3 = document.getElementById("pubu-03");
    var pb4 = document.getElementById("pubu-04");

    var pbImgs_1 = pb1.children;
    var pbImgs_2 = pb2.children;
    var pbImgs_3 = pb3.children;
    var pbImgs_4 = pb4.children;

    var pb1Height = jisuan(pbImgs_1);
    var pb2Height = jisuan(pbImgs_2);
    var pb3Height = jisuan(pbImgs_3);
    var pb4Height = jisuan(pbImgs_4);

    // 找到高度最小的div
    var minHeight = Math.min(pb1Height,pb2Height,pb3Height,pb4Height);

    if (minHeight === pb1Height){
        return pb1;
    }
    if (minHeight === pb2Height){
        return pb2;
    }
    if (minHeight === pb3Height){
        return pb3;
    }
    if (minHeight === pb4Height){
        return pb4;
    }
}

// 计算每个div的高度
function jisuan(pbImgs) {
    if (pbImgs === 0 || pbImgs.length === 0 ) {
        return 0;
    }
    else {
        var height = 0;
        // 获取当前每列的图片
        for(var i = 0;i < pbImgs.length; i++){
            var img = pbImgs[i];
            var h = img.height;
            height = height + h;
        }
        return  height;
    }
}