欢迎大家参考我的瀑布流，小白推荐

最新推荐文章于 2022-10-21 16:46:51 发布

婆婆丁的成长记

最新推荐文章于 2022-10-21 16:46:51 发布

阅读量925

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42855542/article/details/83066997

版权

首先，了解一下什么是瀑布流（以下为百度百科）：又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

接下来是我自己的语言，菜鸟前端，大家多多包容也请大家多多的指教！！

说是参差不齐，实际上也只是高度上的差异，若高宽都是随意的，那么难度是非常非常大的。所以，我们能的瀑布是固定宽而auto height的。

同时，由于同数据库里的大量图片文字信息在一起，不可能一次性载出来，不说用户可以从在等到晚，从开启你的网页到直接关闭，所以瀑布流还有一个特点就是，懒加载！（稍微提及一下）——单我们需要新数据的时候加载新数据，在瀑布流中，当我们的滚轮碰到底的时候加载新图片！

以下的内容不涉及响应式布局，若有兴趣的朋友可以先自己看看，等我下次写博客为大家带来bootstrap框架，很好用的一个东西。

 <div id="wrap">
        <div>
            <img src="">
            <a href="">标题</a>
        </div>
        <div>
            <img src="">
            <a href="">标题</a>
        </div>
        <div>
            <img src="">
            <a href="">标题</a>
        </div>
        <div>
            <img src="">
            <a href="">标题</a>
        </div>
       <!--数量尽量多一些，毕竟没有达到有滚轮，很难开始瀑布形成-->
 </div>

* {
    margin: 0;
    padding: 0;
    border: none;
}
body {
    background: #ddd;
}
img {
    border: none;
}
a {
    text-decoration: none;
    color: #444;
}
a:hover {
    color: #999;
}

/* Wrap */
#wrap {
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
}
#wrap>div {
    float: left;
    box-sizing: border-box;
    width: 280px;
    height: auto;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}
#wrap>div>img {
    width: 100%;
}
#wrap>div>a {
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
}

上一套html和css先，接下来我们开始js，先从js入手，转jquery更加的方便。

function waterfall(wrap, boxes) {
    //获取屏幕显示的列数
    var boxWidth = boxes[0].offsetWidth + 20;
    var windowWidth = document.documentElement.clientWidth;
    var colsNumber = Math.floor(windowWidth / boxWidth);

    // 设置瀑布容器的宽度
    wrap.style.width = boxWidth * colsNumber + 'px';

    // 定义一个数组并存储每一列的高度
    var everyHeight = new Array();
    for (var i = 0; i < boxes.length; i++) {
        if (i < colsNumber) {
            everyHeight[i] = boxes[i].offsetHeight + 20;
            //因为第一行沾满了，我们往下排顺序，需要往高度最小的插入，把孔隙补上，开始//
            定位
        } else {

            var minHeight = Math.min.apply(null, everyHeight);
		//这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只
		//需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

            var minIndex = getIndex(minHeight, everyHeight);
				
            var leftValue = boxes[minIndex].offsetLeft - 10;
            boxes[i].style.position = 'absolute';
            boxes[i].style.top = minHeight + 'px';
            boxes[i].style.left = leftValue + 'px';
            everyHeight[minIndex] += boxes[i].offsetHeight + 20;
        };
    }
}

//获取最小列的索引
function getIndex(minHeight, everyHeight) {
    for (index in everyHeight) {
        if (everyHeight[index] == minHeight) {
            return index;
        };
    };
};

//传参
window.onload = function() {
    var wrap = document.getElementById('wrap');
    var boxes = wrap.getElementsByTagName('div');
    waterfall(wrap, boxes);
}

瀑布流的布局到此，结束，但是，瀑布不停歇，所以还有一个关键特效，也就是我们上面说的懒加载，也是滚动加载。

也就是我们的追加盒子效果

window.onmousewheel = function(ev){
  var next=document.documentElement.clientHeight+document.documentElement.scrollTop+200;
 if(aaa > document.documentElement.scrollHeight){
        // 追加盒子；需要后台数据，或者自己写的数据
   		使用append，到这里也差不多了，以布局为基础，添加盒子由朋友你来完成了。
   		上头的+200可以不用，直接相等，即到达底部，执行追加盒子
   }

        }

有缘的话，在我下一期博客见面吧。