window.onload = function() {
const waterfall = document.getElementById('waterfall');
const items = waterfall.querySelectorAll('.waterfall-item');
const columnCount = 3;
const columnHeights = new Array(columnCount).fill(0);
for (let i = 0; i < items.length; i++) {
const item = items[i];
const columnIndex = i % columnCount;
const columnHeight = columnHeights[columnIndex];
item.style.left = `${columnIndex * (item.offsetWidth + 10)}px`;
item.style.top = `${columnHeight}px`;
columnHeights[columnIndex] += item.offsetHeight + 20;
}
const maxHeight = Math.max(...columnHeights);
waterfall.style.height = `${maxHeight}px`;
};
标签:columnCount,const,columnIndex,布局,item,瀑布,waterfall,columnHeights
From: https://www.cnblogs.com/zsnhweb/p/17305635.html