瀑布流布局

瀑布流布局

  介绍下如何实现瀑布流布局。


  目录：

---

效果

  各 div 宽度一样，高度由内容撑开。所有div紧密排列在一起，效果如下：

  可以 点击在线预览。

---

步骤

1. 先获取第一行中各 div 高度，保留在数组中，作为各列初始高度。假设一排有 n 个 div。
2. 获取各列高度的最小项（数组最小项），将第 n+1个 div 移动到高度最低的列的下方。
3. 高度最低的列的高度（数组对应的项）加上第 n+1个 div 的自身高度，n++。
4. 重复步骤2，直到所有 div 排序完毕。
       
      图片中1,2,3…是对应 div 元素在 html 文档中的排列顺序。

---

核心代码

/**
 * 瀑布流函数
 * @param  {[type]} oDivs     页面所有div构成的dom数组
 * @param  {[type]} divWidth  每个div的宽度
 * @param  {[type]} columnNum 列数
 */
function waterfall(oDivs,divWidth,columnNum) {
    var columnHeightList = []; // 保存各列高度
    var targetIndex = 0; // 列高度最低所在的列序号
    for (i = 0; i < oDivs.length; i++) {
        var mydiv = oDivs[i];
        if (i < columnNum) {
            columnHeightList.push(mydiv.offsetHeight); // 保存各列初始高度
            mydiv.style.cssText = 'position:relative;float:left;';
        } else {
            // 获取高度最低所在的列序号（从0开始）
            targetIndex = columnHeightList.indexOf(Math.min.apply(null, columnHeightList));
            // 将div移动到最低列的下方
            mydiv.style.cssText = 'position:absolute';
            mydiv.style.left = targetIndex * divWidth + 'px';
            mydiv.style.top = columnHeightList[targetIndex] + 'px';
            // 将所在的列高度加上div高度
            columnHeightList[targetIndex] += mydiv.offsetHeight;
        }
    }
}

---

图片无限加载

  思路是检测当前屏幕滚动的高度和浏览器窗口高度之和 跟 最低图片的距页面顶部高度比较，满足一定条件便加载图片。

// 页面滚动时触发
window.onscroll = function() {
    var lastDiv = oDivs[oDivs.length - 1];
    var lastDivTop = lastDiv.offsetTop; // 距离页面顶部的高度
    var lastDivHeight = lastDiv.offsetHeight; // 自身高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //注意解决兼容性
    var bodyHeight = document.documentElement.clientHeight; //可视区高度
    // 加载图片的条件
    if ((scrollTop + bodyHeight) > (lastDivTop + lastDivHeight / 2)) {
      // 加载图片代码...
    }
}

需要注意的是：在 js 中设置元素样式记得加单位。

原文出处：瀑布流布局（JS无动画版）