当前位置：首页 > ops >正文

瀑布流布局

ops 2025/6/25 19:45:25

瀑布流布局实现方案

瀑布流布局（Masonry Layout）是一种流行的网页布局方式，特点是元素宽度固定但高度不一，像瀑布一样垂直排列。以下是几种实现瀑布流布局的方法：

1. 纯CSS实现（CSS Grid 或 CSS Columns）

使用CSS Grid（现代浏览器支持）

html

<div class="masonry-grid"><div class="grid-item">...</div><div class="grid-item">...</div><!-- 更多项目 -->
</div>

css

.masonry-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));grid-gap: 15px;grid-auto-rows: 10px; /* 控制行高基数 */
}.grid-item {grid-row-end: span var(--row-span); /* 通过JS计算设置 */
}

使用CSS Multi-column（兼容性更好）

css

.masonry-grid {column-count: 3;column-gap: 15px;
}.grid-item {break-inside: avoid;margin-bottom: 15px;
}@media (max-width: 768px) {.masonry-grid {column-count: 2;}
}

2. 使用jQuery插件（Masonry）

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script><div class="grid"><div class="grid-sizer"></div><div class="grid-item">...</div><div class="grid-item">...</div><!-- 更多项目 -->
</div>

css

.grid {margin: 0 auto;
}
.grid-sizer,
.grid-item {width: 32%;margin-bottom: 15px;
}
.grid-item {float: left;
}
.grid-item img {width: 100%;display: block;
}

javascript

$(document).ready(function() {$('.grid').masonry({itemSelector: '.grid-item',columnWidth: '.grid-sizer',percentPosition: true});// 当内容加载完成后重新布局$('.grid').imagesLoaded().progress(function() {$('.grid').masonry('layout');});
});

3. 使用现代JavaScript库（Isotope）

html

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script><div class="grid"><div class="grid-item">...</div><div class="grid-item">...</div><!-- 更多项目 -->
</div>

javascript

var iso = new Isotope('.grid', {itemSelector: '.grid-item',masonry: {columnWidth: 200,gutter: 20}
});

4. 纯JavaScript实现

javascript

function waterfall(container, box, cols) {const containerEl = document.querySelector(container);const boxEls = document.querySelectorAll(box);const containerWidth = containerEl.offsetWidth;const boxWidth = boxEls[0].offsetWidth;const colsNum = cols || Math.floor(containerWidth / boxWidth);// 设置容器宽度containerEl.style.width = colsNum * boxWidth + 'px';// 初始化高度数组const heightArr = [];for (let i = 0; i < colsNum; i++) {heightArr[i] = 0;}// 布局每个项目boxEls.forEach(item => {const minHeight = Math.min(...heightArr);const index = heightArr.indexOf(minHeight);item.style.position = 'absolute';item.style.left = index * boxWidth + 'px';item.style.top = minHeight + 'px';heightArr[index] += item.offsetHeight;});// 设置容器高度containerEl.style.height = Math.max(...heightArr) + 'px';
}// 使用
window.onload = function() {waterfall('.masonry-container', '.masonry-item', 3);
};window.onresize = function() {waterfall('.masonry-container', '.masonry-item', 3);
};

响应式设计建议

css

/* 响应式调整列数 */
@media (max-width: 1200px) {.masonry-grid {column-count: 4;}
}
@media (max-width: 992px) {.masonry-grid {column-count: 3;}
}
@media (max-width: 768px) {.masonry-grid {column-count: 2;}
}
@media (max-width: 576px) {.masonry-grid {column-count: 1;}
}