h5实现瀑布流
实现瀑布流布局的方法
使用CSS多列布局（column-count）
CSS的column-count属性可以将内容分成多列，适用于简单的瀑布流布局。通过设置列数和列间距，可以快速实现基本效果。
.waterfall {
column-count: 3;
column-gap: 15px;
}
.item {
break-inside: avoid;
margin-bottom: 15px;
}HTML结构只需将内容包裹在div中，每个item会自动填充到各列。此方法简单但无法实现动态加载和高度自适应。
使用Flexbox布局
Flexbox结合JavaScript可以动态计算高度实现瀑布流。通过监听滚动事件动态加载数据，并计算每列高度决定新元素插入位置。
.container {
display: flex;
flex-direction: row;
}
.column {
flex: 1;
padding: 0 10px;
}JavaScript部分需要计算最小高度列并追加元素：
function appendItems() {
const columns = document.querySelectorAll('.column');
let minHeightColumn = columns[0];
columns.forEach(column => {
if (column.offsetHeight < minHeightColumn.offsetHeight) {
minHeightColumn = column;
}
});
// 创建新元素并追加到minHeightColumn
}使用Grid布局
CSS Grid结合grid-auto-flow: dense可以实现更灵活的瀑布流。通过设置网格轨道大小和自动填充，元素会自动填充空白区域。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-flow: dense;
gap: 15px;
}使用第三方库（如Masonry）
Masonry库专门用于瀑布流布局，能自动计算最优位置。引入库后初始化即可：
var msnry = new Masonry('.grid', {
itemSelector: '.grid-item',
columnWidth: 200,
gutter: 10
});动态加载优化
无论采用哪种方式，动态加载需配合以下优化：
- 监听滚动事件或使用Intersection Observer API触发加载
- 使用
requestAnimationFrame减少重排开销 - 图片懒加载（loading="lazy"属性或自定义判断）
响应式适配
通过媒体查询调整列数：
@media (max-width: 768px) {
.waterfall { column-count: 2; }
.grid-container { grid-template-columns: repeat(2, 1fr); }
}选择方案时需权衡开发效率与性能需求，CSS方案适合静态内容，JavaScript方案适合动态数据，第三方库能快速实现复杂效果但增加资源体积。
