js 瀑布流实现
瀑布流布局实现方法
瀑布流布局是一种流行的网页设计方式，通过动态排列元素实现视觉上的错落有致效果。以下是几种常见的实现方式：
使用纯CSS实现
CSS Grid或Columns属性可以创建基础瀑布流效果，但无法精确控制元素顺序：
.container {
column-count: 3;
column-gap: 15px;
}
.item {
break-inside: avoid;
margin-bottom: 15px;
}使用JavaScript计算布局
动态计算每个元素位置实现更精确的控制：
function waterfall(container, items, columnCount = 3) {
const containerWidth = container.offsetWidth;
const columnWidth = containerWidth / columnCount;
const heights = new Array(columnCount).fill(0);
items.forEach(item => {
const minHeight = Math.min(...heights);
const columnIndex = heights.indexOf(minHeight);
item.style.position = 'absolute';
item.style.width = `${columnWidth}px`;
item.style.left = `${columnIndex * columnWidth}px`;
item.style.top = `${minHeight}px`;
heights[columnIndex] += item.offsetHeight;
});
container.style.height = `${Math.max(...heights)}px`;
}使用现成库
Masonry.js是流行的瀑布流解决方案：
var msnry = new Masonry('.grid', {
itemSelector: '.grid-item',
columnWidth: 200,
gutter: 20
});响应式处理
添加窗口大小变化的监听：
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
waterfall(container, items);
}, 250);
});图片懒加载优化
对于含图片的瀑布流，需等待图片加载完成后计算高度：
imagesLoaded(container, function() {
waterfall(container, items);
});实现时需注意性能优化，特别是元素数量较多时。动态加载内容可结合Intersection Observer API实现无限滚动效果。
