three way of waterfall flow

最新推荐文章于 2026-06-30 20:52:13 发布

原创最新推荐文章于 2026-06-30 20:52:13 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

front end

本文介绍两种实现瀑布流布局的方法：一种使用CSS3的column-width属性简化布局；另一种使用JavaScript动态创建元素并进行精确布局，同时支持滚动加载更多内容。

First the simple way , use css3 colum-width：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <style>

        ul{
            column-width: 250px;
        }

        ul>li{
            display: inline-block;
            box-shadow: 10px 10px 10px 10px gray;
            background: red;
            width: 100%;
            height: 300px;
            text-decoration: none;
            margin: 10px 0;
        }

        ul>li:nth-of-type(1){
            height: 100px;
        }

        ul>li:nth-of-type(2){
            height: 50px;
        }

        ul>li:nth-of-type(3){
            height: 80px;
        }


        ul>li:nth-of-type(4){
            height: 120px;
        }


        ul>li:nth-of-type(5){
            height: 180px;
        }

        ul>li:nth-of-type(6){
            height: 200px;
        }

        ul>li:nth-of-type(7){
            height: 111px;
        }


    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

这里写图片描述

note : you need add display:inline-block otherwise some block will to next colum.

the second way ，by javascript

step:

    .1 dynatic create box and img 
    .2 cycle get the minimum height and then put the next to the below of the most minimum  use position absolute method
    .3 when scroll to half height of screen load other more

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流首页</title>

    <style>

        *{
            /*去除边距*/
            margin:0;
            padding: 0;
            /*html性能优化:虚拟dom,如果一个html标签没有设置css样式,就是虚拟的,
             所以无论设置多少层div都对性能没有影响*/
        }
        #main{
            height: 2000px;
            /*定位*/
            position: relative;
        }
        .box{
            /*内边距*/
            padding:15px 0 0 15px ;
            float: left;
        }
        .pic{
            /*边框*/
            border:1px solid #dddddd;
        }
        .pic img{
            width: 105px;
        }

    </style>
</head>
<body>
<!--父盒子-->
<div id="main">
    <!--单个盒子-->
    <div class="box">
        <!--图片盒子-->
        <div class="pic">
            ![](images/1.jpg)
        </div>
    </div>
    <!--单个盒子标签复制20次...图片名字改改...-->
</div>
<!--jQuery方式需要引入jQuery库,JS方式与CSS方式都要注释掉-->
<!--引入JS,CSS方式注释掉-->

<script>


    /**
     * Created by Mac on 2017/1/7.
     */
    function $(id) {
        //判断id的类型
        return typeof id === 'string'?document.getElementById(id):id;
    }

    //当网页加载完毕
    window.onload = function () {
        //瀑布流布局 保证传的参数能够找到父盒子
        waterFall('main','box');

        //滚动加载盒子
        window.onscroll = function (){
            //判断是否加载
            if (checkWillLoad())
            {
                //创造假数据
                var data = {'dataImg':[{'img':'22.jpg'},{'img':'22.jpg'},{'img':'22.jpg'},{'img':'22.jpg'},{'img':'22.jpg'},{'img':'22.jpg'}]};
                //加载数据
                for(var i=0; i<data.dataImg.length; i++)
                {
                    //创建最外面的盒子
                    var newBox = document.createElement('div');
                    newBox.className = 'box';
                    $('main').appendChild(newBox);
                    //创建单个盒子
                    var newPic = document.createElement('div');
                    newPic.className = 'pic';
                    newBox.appendChild(newPic);
                    //创建img
                    var newImg = document.createElement('img');
                    newImg.src = 'images/' + data.dataImg[i].img;
                    newPic.appendChild(newImg);
                }
                //把刚创建的盒子瀑布流布局
                waterFall('main','box');
            }
        }
    }

    //实现瀑布流布局
    //规则:从第二行开始的图片,总是拼接在上一行高度最矮的图片后面
    function  waterFall(parent,box) {
        //父盒子居中
        //通过父盒子拿到所有的子盒子
        var allBox = $(parent).getElementsByClassName(box);
        //求出盒子的宽度
        var boxWidth = allBox[0].offsetWidth;
        //求出浏览器的宽度(包括边框的宽高)
        var screenWidtn = document.body.offsetWidth;
        //求出列数 //取整函数取整
        var cols = Math.floor( screenWidtn/boxWidth);
        //父标签居中
        //先求出父标签宽度
        $(parent).style.width = boxWidth * cols + 'px';
        //居中
        $(parent).style.margin = '0 auto';

        //子盒子定位
        //创建一个高度数组,存所有的高度
        var heightArr = [];
        //遍历
        for(var i = 0; i < allBox.length ;i++)
        {
            //求出每个盒子的高度
            var boxHeight = allBox[i].offsetHeight;
            //第一行的盒子不需要重新定位//每一行的盒子数与列数相同
            if(i<cols)
            {
                //添加第一行所有盒子高度
                heightArr.push(boxHeight);
            }
            else//剩下的盒子都需要瀑布流布局
            {
                //求出最矮的盒子高度
                var minBoxHeight = Math.min.apply(this,heightArr);
                //求出最矮盒子对应的索引
                var minBoxIndex = getMinBoxIndex(minBoxHeight,heightArr);
                //盒子瀑布流定位  顶部间距就是最矮盒子的高度
                allBox[i].style.position = 'absolute';
                allBox[i].style.top = minBoxHeight + 'px';
                allBox[i].style.left = minBoxIndex * boxWidth +'px';
                //关键:更新数组最矮高度,使下一个图片在高度数组中总是找最矮高度的图片下面拼接
                heightArr[minBoxIndex] += boxHeight;
            }
        }
    }

    //求出最矮盒子对应的索引函数
    function getMinBoxIndex(val,arr) {
        for(var i in arr)
        {
            if(val == arr[i])
            {
                return i;
            }
        }
    }

    //加载更多规则:当浏览器最下方到达图片的高度一半时让其刷新出来
    //判断是否符合加载条件
    function checkWillLoad() {
        //取出所有盒子
        var allBox = $('main').getElementsByClassName('box');
        //取出最后一个盒子
        var lastBox = allBox[allBox.length - 1];
        //求出最后一个盒子高度的一半 + 内容与浏览器头部的偏离位置
        var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
        //求出浏览器的高度
        // 注意:JS代码存在浏览器兼容问题 一般分标准模式(按屏幕算document.body.offsetHeight)和混杂模式(按所有内容算)
        var screenHeight =  document.documentElement.clientHeight;
        //页面偏离屏幕的高度
        var scrollTopHeight = document.body.scrollTop;
        //判断
        return lastBoxDis <= screenHeight + scrollTopHeight;
    }
</script>

</body>
</html>

这里写图片描述

.3 Third way is same to second but use jq to write

// document.write("<script src='jquery-3.1.1.min.js'></script>");
//当页面加载完毕
$(window).on('load',function () {
    //1.实现瀑布流布局
    waterFall();

    //2.滚动加载
    $(window).on('scroll',function () {
        //判断是否加载
        if (checkWillLoad())
        {
            ////创造假数据
            var data = {'dataImg':[{'img':'23.jpg'},{'img':'24.jpg'},{'img':'25.jpg'},{'img':'26.jpg'},{'img':'27.jpg'},{'img':'28.jpg'}]};
            //遍历创建盒子
            $.each(data.dataImg,function (index,value)
                   {
                       //创建一个div标签 设置它的类为'box' 添加到'main'里面去
                       var newBox = $('<div>').addClass('box').appendTo($('#main'));
                       var newPic = $('<div>').addClass('pic').appendTo($(newBox));
                       //创建img  取出遍历的对象value的img属性对应的值
                       $('<img>').attr('src','images/'+$(value).attr('img')).appendTo($(newPic));
                   })
            //1.实现瀑布流布局
            waterFall();
        }
    });
});

//实现瀑布流布局
function waterFall () {
    //拿到所有的盒子
    var allBox = $('#main > .box');
    //取出其中一个盒子的宽度
    var boxWidth = $(allBox).eq(0).outerWidth();
    //取出屏幕的高度
    var screenWidth = $(window).width();
    //求出列数 //取整函数取整
    var cols = Math.floor( screenWidth/boxWidth);
    //父标签居中
    $('#main').css({
        'width':cols * boxWidth + 'px',
        'margin':'0 auto'
    });
    //对子盒子定位
    var heightArr = [];
    //遍历
    $.each(allBox,function (index,value) {
        //取出单独盒子的高度
        var boxHeight = $(value).outerHeight();
        //判断是否第一行
        if(index < cols)
        {
            heightArr[index] = boxHeight;
        }
        else  //剩余的盒子要瀑布流布局
        {
            //求出最矮的盒子高度
            var minBoxHeight = Math.min.apply(null,heightArr);
            //取出最矮高度对应的索引  封装了js的这个方法
            var minBoxIndex = $.inArray(minBoxHeight,heightArr);
            //定位
            $(value).css({
                'position':'absolute',
                'top':minBoxHeight + 'px',
                'left':minBoxIndex * boxWidth + 'px'
            });
            //更新数组中最矮的高度
            heightArr[minBoxIndex] += boxHeight;
        }
    })

}

//判断是否符合加载条件
function checkWillLoad() {
    //直接取出最后一个盒子
    var lastBox = $('#main > div').last();
    //取出最后一个盒子高度的一半 + 头部偏离的位置
    var lastBoxDis = $(lastBox).outerHeight() + $(lastBox).offset().top;
    //求出浏览器的高度
    var clientHeight = $(window).height();
    //求出页面偏离浏览器高度
    var scrollTopHeight = $(window).scrollTop();
    //比较返回
    return lastBoxDis <= clientHeight + scrollTopHeight;

}