自适应瀑布布局

什么是自适应瀑布流

自适应瀑布流是一种网页布局技术，它可以根据容器的大小和内容的尺寸，动态地调整每个元素的位置和列数，以实现更好的排列效果。

传统的瀑布流布局是将内容按顺序依次填充到多个列中，类似于瀑布水流从上到下流淌。但在固定列数的情况下，如果某列高度较大，而其他列高度较小，就会导致布局不均匀，出现空白间隙或某些列过度拥挤的问题。

自适应瀑布流通过动态计算每个元素的位置和列数，以及根据容器的宽度和元素的尺寸来进行调整，使得所有列的高度尽可能平衡，从而达到更好的排列效果。这样可以提升页面的美观度和用户体验。

实现自适应瀑布流通常使用CSS布局技术，如CSS Grid、Flexbox等，以及JavaScript/jQuery来处理布局和计算。通过使用这些技术，可以根据不同屏幕大小和设备类型，在不同的视口尺寸下显示出最佳的布局效果，让内容在各种设备上都能够良好地展示和呈现。自适应瀑布流常用于图片展示、商品展示等需要灵活排列的内容场景。

下面代码就是自定义瀑布流的代码

 window.onload = function() {
        waterFall()
        window.onresize = waterFall
    }

    function waterFall() {
        var container = document.getElementById("con")
        var item = document.getElementsByClassName("item")
        var width = item[0].offsetWidth
        var clientWidth = document.documentElement.clientWidth
        var lie = Math.floor(clientWidth / width)

        var hrr = []
        for (var i = 0; i < item.length; i++) {
            if (i < lie) {
                item[i].style.top = '0px'
                item[i].style.left = i * width + "px"
                hrr.push(item[i].offsetHeight)
            } else {
                let min = Math.min.apply(null, hrr)
                let index = hrr.indexOf(min)
                item[i].style.top = min + "px"
                item[i].style.left = index * width + "px"
                hrr[index] += item[i].offsetHeight
            }
        }
    }

这段代码实现了一个简单的自适应瀑布流布局。在页面加载完成时和窗口大小改变时，调用waterFall()函数来更新布局。

具体实现步骤如下：

1. 获取容器元素和元素项（item）集合。
2. 获取第一个元素项的宽度，并获取当前窗口的宽度。
3. 计算每行可容纳的列数（lie）：将窗口宽度除以元素项宽度并取整。
4. 创建一个数组 hrr 存储每一列的高度。
5. 遍历元素项集合：

• 如果是第一行的元素项，设置其 top 和 left 样式，将其高度存入 hrr 数组。
• 如果不是第一行的元素项，找到当前高度最小的列（使用 Math.min.apply() 找到最小高度，然后使用 indexOf() 方法找到对应的列索引），设置其 top 和 left 样式，并更新该列的高度。

1. 完成布局更新。

需要注意的是，该代码假定元素项的宽度是固定且相等的。如果元素项的宽度不同，可以根据实际情况进行修改。同时，在使用类名获取元素集合时，确保 HTML 中有对应的元素和类名。

此代码仅提供了一个基本的自适应瀑布流布局示例，您可以根据自己的需求进行修改和优化。