瀑布流布局
介绍下如何实现瀑布流布局。
目录:
效果
各 div 宽度一样,高度由内容撑开。所有div紧密排列在一起,效果如下:
可以 点击在线预览。
步骤
- 先获取第一行中各 div 高度,保留在数组中,作为各列初始高度。假设一排有 n 个 div。
- 获取各列高度的最小项(数组最小项),将第 n+1个 div 移动到高度最低的列的下方。
- 高度最低的列的高度(数组对应的项)加上第 n+1个 div 的自身高度,n++。
- 重复步骤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无动画版)