js实现瀑布流
使用纯JavaScript实现瀑布流
瀑布流布局是一种流行的网页设计方式，特点是元素宽度固定，高度不一，按顺序排列，自动填充最短列。以下是实现方法：
HTML结构
<div id="waterfall-container">
<div class="item">内容1</div>
<div class="item">内容2</div>
<!-- 更多item -->
</div>CSS样式
#waterfall-container {
position: relative;
margin: 0 auto;
}
.item {
position: absolute;
width: 200px; /* 固定宽度 */
padding: 10px;
box-sizing: border-box;
}JavaScript实现
function waterfall(container, itemClass) {
const containerElem = document.getElementById(container);
const items = document.getElementsByClassName(itemClass);
const columnCount = Math.floor(window.innerWidth / 200); // 计算列数
const columnHeights = new Array(columnCount).fill(0);
const gap = 10; // 间距
// 初始化容器宽度
containerElem.style.width = `${columnCount * (200 + gap)}px`;
Array.from(items).forEach(item => {
// 找到高度最小的列
const minHeight = Math.min(...columnHeights);
const columnIndex = columnHeights.indexOf(minHeight);
// 设置item位置
item.style.left = `${columnIndex * (200 + gap)}px`;
item.style.top = `${minHeight}px`;
// 更新列高度
columnHeights[columnIndex] += item.offsetHeight + gap;
});
// 设置容器高度
containerElem.style.height = `${Math.max(...columnHeights)}px`;
}
// 调用函数
window.addEventListener('load', () => waterfall('waterfall-container', 'item'));
window.addEventListener('resize', () => waterfall('waterfall-container', 'item'));使用CSS columns实现简易瀑布流
对于不需要精确控制元素位置的场景，可以使用CSS columns属性快速实现：
#waterfall-container {
column-count: 4; /* 列数 */
column-gap: 15px; /* 列间距 */
}
.item {
break-inside: avoid; /* 防止元素被分割 */
margin-bottom: 15px;
}动态加载内容的实现
当需要滚动加载更多内容时，可以添加以下代码：
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
// 加载新数据
loadMoreItems();
}
});
function loadMoreItems() {
// 获取新数据并添加到容器
// 然后重新调用waterfall()函数
}注意事项
- 图片元素需要确保已加载完成再计算高度，可以使用
imagesLoaded库 - 响应式设计需要监听resize事件并重新计算布局
- 对于大量元素，考虑使用虚拟滚动技术优化性能
- 现代浏览器中也可以考虑使用CSS Grid或Flexbox的特定布局实现类似效果
以上实现提供了基础的瀑布流功能，可以根据实际需求调整列宽、间距和响应式断点等参数。
