使用JS或CSS如何实现瀑布流布局，几种方案介绍(2)-木庄网络博客

核心操作就是维护每个元素的 left、top，然后使用 left 和 top 去渲染到正确位置。

getListPosition(){
    // 视口宽度 / 每列宽度 得出划分为几列
    let col = this.screenWidth / this.itemWidth >> 0;
    var arr = [];
    for(var i = 0; i < col; i++) arr.push({
        list: [],
        height: 0,
    })
    // 遍历所有元素
    this.listInfo.forEach((item,idx)=>{
        // 找到最低的一列
        var colIndex = 0;
        for(var i = 1; i < col; i++){
            if(arr[colIndex].height > arr[i].height){
                // colItem = arr[i]
                colIndex = i
            }
        }
        // 修改元素的信息
        // 所属列
        item.line = colIndex;
        // 计算之后的 top 距离
        item.top = arr[colIndex].height+ 'px';
        // 计算之后的 left 距离
        item.left = colIndex * (this.itemWidth + 10) + 'px'
 
        // 累加操作
        arr[colIndex].list.push(item);
        arr[colIndex].height += item.height + 10;
    })
    return arr
},

通过计算，我们可以到，瀑布流布局下每个元素的位置，通过绝对定位就可以实现。

根据下标，来渲染到不同的通道 idx % 4

因为上个方案用到了绝对定位，那么有没有不用绝对定位的方案呢？回到我们的问题点上 定宽，不定高，那我们完全可以通过分开渲染放弃 absolute 来实现。

jsGroupList(){
    return this.list.reduce((s,n,idx)=>{
        // 根据下标，直接分配所属列
        s[idx % 4].push({idx: idx, item: n})
        return s
    }, [[],[],[],[],])
},

看开头是实现类似的功能的，但是有一个弊端（快来评论区回复呀）。

通过高度计算，然后分通道，避免 absolute

因为上一个方案是按下标分类的，其实瀑布流是按高度分类的，所以我们分类条件换成最低的列。

jsGroupHeightList(){
    var list = [
        {height: 0, list: []},{height: 0, list: []},
        {height: 0, list: []},{height: 0, list: []},
    ]
    // 遍历每个元素
    for(var i = 0; i < this.list.length; i++){
        // 当元素有大小的时候在进行操作。
        if(!this.listInfo[i].height) return list;
        // 默认第一个通道是最小高度列
        var minHeightItem = list[0];
        // 计算最小高度列
        list.forEach(v=>{
            if(v.height < minHeightItem.height) minHeightItem = v
        })
        // 把新的元素高度累加到列中。
        minHeightItem.height += this.listInfo[i].height
        // 把新的元素push到列中
        minHeightItem.list.push({idx: i, item: this.list[i]})
    }
    return list;
},

总结

好了，到这里我能想到的方案就都介绍了。你还有什么方案吗？咱们可以在评论区讨论一下可行性。接下来就是我们的方案总结了。

方案	优点	缺点	点评
columns	实现简单、纯 CSS 方案	兼容性	-
flex	-	需要固定高度，填充难以控制等问题	-
float、inline、bootstrapGrid	-	-	没点大都用不出这方案
grid	-	-	可以nth-child模拟实现、或者等待兼容性 masonry
absolute	效果好	-	JS计算无限可能
js普通通道	-	填充难以控制	-
js优化通道	效果好、无绝对定位	在出现夸列等操作的时候不是很好控制	-