js 瀑布流实现
瀑布流实现方法
瀑布流（Masonry Layout）是一种常见的网页布局方式，元素按照高度自适应排列，形成类似瀑布的效果。以下是几种实现瀑布流的方法：
使用纯 CSS 实现
CSS Grid 或 Flexbox 可以简单实现瀑布流效果，但需要固定列数。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
break-inside: avoid;
}使用 JavaScript 动态计算
动态计算元素位置，实现更灵活的瀑布流布局。
function masonryLayout(containerSelector, itemSelector, columns) {
const container = document.querySelector(containerSelector);
const items = document.querySelectorAll(itemSelector);
const containerWidth = container.offsetWidth;
const columnWidth = containerWidth / columns;
const heights = Array(columns).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`;
}
window.addEventListener('load', () => masonryLayout('.container', '.item', 3));
window.addEventListener('resize', () => masonryLayout('.container', '.item', 3));使用第三方库
现有成熟的库可以快速实现瀑布流，如 Masonry.js 或 Isotope。
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
var elem = document.querySelector('.container');
var msnry = new Masonry(elem, {
itemSelector: '.item',
columnWidth: 200,
gutter: 10
});
</script>响应式瀑布流
结合媒体查询实现响应式布局，根据屏幕宽度调整列数。
function getColumns() {
if (window.innerWidth < 768) return 2;
if (window.innerWidth < 1024) return 3;
return 4;
}
window.addEventListener('resize', () => {
masonryLayout('.container', '.item', getColumns());
});注意事项
- 图片加载可能影响高度计算，需确保图片加载完成后再布局。
- 动态添加内容时需重新计算布局。
- 性能优化：可使用防抖（debounce）减少 resize 事件的频繁触发。
以上方法可根据项目需求选择，纯 CSS 适合简单场景，JavaScript 实现更灵活，第三方库适合快速开发。
