瀑布流布局

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

它的特点是将内容以类似瀑布流水般自上而下、依次排列显示，不断加载新内容并自动补充到页面底部。

与传统的网页设计相比，瀑布流具有以下几个优势：

1. 动态展示：通过无限滚动加载新内容，用户可以不断地浏览更多信息，避免了需要点击“下一页”或刷新页面获取更新的麻烦。

2. 快速导航：由于页面中同时展示了多个项目，用户可以方便地快速浏览和选择感兴趣的内容。这对于图片集合、商品列表等情况非常实用。

3. 用户体验好：因为没有明显分页和加载延迟的干扰，在使用过程中能够提供更加连续、顺畅且沉浸式的阅读体验。

然而，在使用瀑布流时也存在一些考虑因素：

1. 内容平衡：由于各项目高度不同，需要注意在设计时保持整体视觉平衡和美感。如果某些项目过大或过小可能会影响整个页面效果。

2. 响应性能：随着不断加载新内容，页面的数据量会逐渐增加。这可能导致网页加载速度变慢和资源消耗增加，需要在设计和开发中考虑性能优化。

总之，瀑布流是一种常用于网页设计的布局方式，通过动态无限滚动展示内容，并提供了更好的用户体验和快速导航功能。但同时也需要注意平衡内容分布以及响应性能等因素。

实现方法:

布局

 <div class="box" id="con">
        <div class="pg">
            <img src="./img/01.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/02.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/03.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/04.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/05.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/06.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/07.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/08.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/09.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/10.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/11.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/12.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/13.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/14.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/15.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/16.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/17.jpg" alt="">
        </div>
        <div class="pg">
            <img src="./img/18.jpg" alt="">
        </div>

    </div>

CSS实现:

 .container{
            column-count: 4;//想要排成的列数
            column-gap: 0;//间距
        }
        .item img{
            width: 100%;
        }

• 缺点:图片的位置是按照从上往下排序，如果我们需要一些动态加载图片的业务，那么新加入的图片将不会加入页面的最低端，不符合我们的业务需求

js方法实现：

 .box {
           position: relative;

        }

        .pg{
            width: 200px;
            height: auto;
            position: absolute;
        }

        .pg img {
            width: 100%;
        }

 <script>
        //当页面加载的时候调用
        window.onload = function(){
            //页面初始化调用
            waterFall()
            //每次页面改变大小调用
            window.onresize = waterFall
        }
        function waterFall(){
        // 1. 设置container盒子的宽度
        //      注意：浏览器的可视区域的宽度 / 一个item元素的宽度 = 一行的排列的元素的个数
        let container = document.getElementById("con")
        let item = document.getElementsByClassName("pg")
        //获取元素的宽度(含border，padding)
        let width = item[0].offsetWidth 
        //计算出浏览器窗口的宽度
        let clientWidth = document.documentElement.clientWidth;
        //计算出应该放几列（向下取整）
        let columnCount = Math.floor(clientWidth / width)
        //设置容器（父盒子）的宽度
        container.style.width = columnCount*width+"px"

        // 2.设置每一个item元素的排列位置
        //  第一行整体的top值都是0 后面的依次找上一行高度最小的容器，在它下面进行排列
        let hrr = []
        for(let i= 0 ;i<item.length;i++){
                //定位第一行的图片
            if(i<columnCount){
                item[i].style.top = "0px"
                item[i].style.left = i* width+"px" 
                hrr.push(item[i].offsetHeight)
            }else{
                //第一行之后的
                //选择总高度最小的列
                let min = Math.min(...hrr)
                let index = hrr.indexOf(min)
                //将每个元素定位到当前总高度最小的列下
                item[i].style.top = min+"px"
                item[i].style.left = index * width+"px" 
                //当前定位的元素加入该列
                hrr[index] += item[i].offsetHeight
            }
        }
    }
    </script>

• 优点:

1. 列数随浏览器窗口大小动态改变
2. 可以实现新图片在最下方展示