【JS 图片瀑布流】简单易用的图片瀑布流

欢迎大家来到IT世界,在知识的湖畔探索吧!

最近项目里有瀑布流的需求，本来打算使用现有轮子的，后来发现在兼容大小屏时样式会出现错乱，因此决定手动实现一个。以下一个简单的demo。（完整代码可已查看next-demo: next-demo – Gitee.com）

欢迎大家来到IT世界,在知识的湖畔探索吧!

如上图所示，瀑布流实现的核心逻辑主要是根据容器宽度，排列数，自动计算图片宽度，然后计算各个图片的绝对定位位置。

技术要点

1. 获取容器宽度，确定大小屏时图片的排列数（小屏2列，中屏3列，大屏4，超大屏5.。。）
2. 根据容器宽度和列数计算出每项的宽度
3. 根据每项宽度，使用New image计算出每个图片的宽高
4. 将容器相对定位，每项绝对定位
5. 计算每项绝对定位(left和top)
6. 计算绝对定位时需要将每项的额外距离计算在内(padding,margin,border)
7. 根据定位信息进行页面布局

代码实现

1. 获取每项宽度

const getColumnWidth = (node: HTMLElement, gap = 20) => { let COLUMN_COUNT = 2; if (node.clientWidth > 968 && node.clientWidth <= 1200) { COLUMN_COUNT = 3; } else if (node.clientWidth > 1200 && node.clientWidth <= 1400) { COLUMN_COUNT = 4; } else if (node.clientWidth > 1400 && node.clientWidth <= 1600) { COLUMN_COUNT = 5; } else if (node.clientWidth > 1600) { COLUMN_COUNT = 6; } return { column: COLUMN_COUNT, columnWidth: Math.floor((node.clientWidth - gap * (COLUMN_COUNT - 1)) / COLUMN_COUNT), } }

欢迎大家来到IT世界,在知识的湖畔探索吧!

2. 根据列宽计算出渲染尺寸宽高

欢迎大家来到IT世界,在知识的湖畔探索吧!const loadImage = async (url: string, width: number) => { const img = new Image(); img.src = url; await new Promise(res => img.onload = res); return { w: width, h: Math.floor((img.naturalHeight / img.naturalWidth) * width), src: img.src, }; };

3. 计算每项的绝对定位

const calculatePositions = (data:any[]) => { const newPositions: Iposition[] = []; const tempHeights = [...columnHeights.current]; data.forEach((img,index:number) => { // 计算元素高度 const elementHeight = img.h + (ITEM_PADDING * 2) + (BORDER_WIDTH * 2) + 20; // 找到最小高度列 const minHeight = Math.min(...tempHeights); const columnIndex = tempHeights.indexOf(minHeight); // 计算位置 newPositions.push({ left: columnIndex * (columns.columnWidth + GAP), top: minHeight }); // 更新列高度（图片高度 + 间距） tempHeights[columnIndex] += elementHeight + GAP; }); columnHeights.current = tempHeights; setPositions([...newPositions]); }

4. 完整的代码可查看 next-demo: next-demo – Gitee.com